StyleSheet로 스타일링 하기

StyleSheet?

React Native에서는 따로 CSS로 스타일링을 하는 것이 아닌, JavaScript로 스타일링을 진행합니다. 따라서 JavaScript로 스타일링을 진행하기 위해서 StyleSheet 객체를 활용합니다.

기본적으로 React Native의 모든 core Components는 props로 style을 받습니다.
이때 React에서는 Styling을 inline으로도 진행할 수 있는데, styleSheet 객체를 선언해서 사용하는 이유가 있습니다.

1. 가독성
   스타일링 코드를 분리하기 때문에 가독성이 좋아집니다.
2. 성능
   StyleSheet 내부에 정의한 스타일을 Cache하기 때문에 리렌더링 시, inline으로 Style을 지정했을때보다 성능이 향상 됩니다.

코드

return 부

const MainScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle = {'defalut'} />
      <Text style={styles.pageTitle}>ToDo App</Text>
      <View style={styles.listView}>
        <Text style={styles.listTitle}>할 일</Text>
      </View>
      <View style={styles.separator}/>
      <View style={styles.listView}>
        <Text style={styles.listTitle}>완료된 일</Text>
      </View>
    </SafeAreaView>
  )
}

StyleSheet

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: Platform.OS === 'android' ? 20 : 0, //android,ios 분리
        backgroundColor: '#f7f8fa'
    },
    pageTitle: {
        marginBottom: 35,
        paddingHorizontal: 15,
        fontSize: 50,
        fontWeight: '600'
    },
    separator: {
        marginHorizontal: 10,
        marginTop: 25,
        marginBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.2)'
    },
    listView: {
        flex: 1,
    },
    listTitle: {
        marginBottom: 25,
        paddingHorizontal: 15,
        fontSize: 41,
        fontWeight: '500'
    }

});

구조는 Styles 객체를 선언하고, 그리고 각 컨테이너에 알맞는 styling을 부여하기 위해 객체값으로 각각의 요소를 선언합니다.
그리고 실제 style props로 받을때 Styles.(스타일_객체명) 으로 받아 Style을 지정할 수 있습니다.