[React Native] 5장 style

React Native 공부를 시작하면서 느낀 불편함이 몇 개 있는데 첫 번째는 개발자도구의 Element, Network 탭 같은 것이 없다는 것이다.

두 번째는 style 작성이 불편했다. 매번 component 파일에 StyleSheet을 생성해서 style을 적용하다 보니 공통 style을 정의하거나 재사용하고 싶은 style을 관리하는 방법을 생각해봐야했다. 그리고 여러 예제에 js와 css가 분리되지 않는 것도 유지보수에 썩 좋아보이지 않았다.

챕터 5장이 끝나가다 보니 가닥이 좀 잡혔기에 내용을 조금 정리해보았다.

조건적인 스타일 사용하기

<View style={[styles.button, this.state.touching && styles.highlight]} />

리액트에서는 워낙 많이 사용하는 방식이라, React Native에서는 어떻게 여러 스타일을 적용하면서 조건도 줄 수 있을 까 고민했는데 위와 같이 하면 된다.

• React Native에서는 배열에서 오른쪽에 있는 객체에 지정된 속성이 우선순위가 더 높다.
• 만약 부정 값(false, null, undefined)이 있을 경우 해당 속성은 무시된다.

스타일 객체 내보내기

아래와 같이 component 파일에 style을 빼서 파일을 분리하는 것이 좋다.

- Login
  |- index.js
  |- styles.js

styles.j는 아래와 같이

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    color: '#FF00FF',
    fontSize: 16
  }
});


export default styles;

index.js에서 다음과 같이 스타일을 불러온다.

import styles from './styles';

스타일의 재사용과 공유

컴포넌트와 스타일을 별도의 디렉터리로 구분하면 사용 목적에 따라 스타일 파일을 명확히 구분할 수 있다.

- src
  |- components
    |- Button
      |- index.js
      |- styles.js
  |- styles
    |- styles.js
    |- colors.js
    |- fonts.js

flexbox

책에 내용이 부실하다. React Native 공식문서 - Layout with Flexbox를 보는 것이 더 낫다.

reference

• 빠른 모바일 앱 개발을 위한 React Native