[React Native] React Native 스타일 지정 방법



 

알림

 

본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다.

 

프로퍼티에 직접 작성

 

프로퍼티 사용

 

첫 번째로 컴포넌트에 직접 프로퍼티를 안에 스타일을 작성하는 방법입니다. 참고로 프로퍼티(property)란, 속성이란 의미로, 위 이미지처럼 컴포넌트에 style을 의미하는 것이며, 어제 작성했던 버튼 컴포넌트 안에 title 등이 해당됩니다. 당연히 태그 안에 작성하는 것이라, 꾸밀 것이 많아 많은 값들을 지정해줘야 하면 코드도 많이 지저분해지기 때문에 지양하는 게 좋은데요. 이미지처럼 짧게 한두 개 정도 지정해줄 땐 편리하게 사용이 가능합니다.

 

변수에 작성 후 호출

 

styles 변수

 

style의 mainView 호출

 

두 번째는 위 이미지처럼 스타일을 변수에 작성하고 style 프로퍼티로 호출해주면 되며, 변수에 한 가지 스타일만 만들어 사용할 수 있는 게 아닌, 여러 개의 스타일 객체를 만들어, 그때 그때 필요한 스타일을 호출해주면 됩니다. 그리고 스타일을 변수에 담아 사용하려면 StyleSheet 컴포넌트를 사용해야 하는데요. 그렇기 때문에 아래의 이미지처럼 리액트 네이티브 모듈에서 Import 해 오셔야 합니다.

 

StyleSheet import

 

내가 스타일 주는 대로 변하는 것을 지켜보는 건 여전히 재밌습니다. 아직 딥하고 난이도 있는 개발을 안 해서 하는 말일 수도 있지만, 어쨌든 이런 부분에 재미를 느끼니 프론트엔드를 지향한 게 아닐까요? 오늘도 더 열심히 해야겠습니다.