[React Native] 2-4 StyleSheet으로 컴포넌트에 스타일 적용

[리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다.

---

React Native를 다루게 된 대부분의 사람들은 웹에서 CSS를 다뤄봤을 것이라고 생각합니다.

 

그렇다면 아마 쉽게 감을 잡을 수 있을 것이라고 생각합니다.

const styles = StyleSheet.create({
	container : {
    	backgroundColor : 'black',
        color : 'white',
        borderWidth : 4,
        borderStyle : 'solid',
        borderColor: 'blue'
    },
    title : {
    	fontSize : 24,
        fontWeight : 'bold'
    }
})

이런식으로 작성하게 되는데 안에 형태를 보면 굉장히 CSS와 비슷하게 되어 있습니다.

다만 주의해야 할 점은 다음과 같습니다.

• 셀렉터라는 개념이 존재하지 않습니다.
• 모든 스타일 속성은 camelCase로 작성해야 합니다.
• display 속성은 기본적으로 flex이며 , 다른 값은 none 밖에 없습니다.
• flexDirection 속성의 기본값은 웹에서는 row이지만, 리액트 네이티브에서는 column입니다.
• 리액트 네이티브에서 스타일링 할 때 숫자 단위는 dp뿐입니다.
• background 대신 backgroundColor를 사용합니다.
• border 대신 borderWidth, borderStyle, borderColor등을 따로따로 설정해야합니다.

---

이젠 components경로 밑에 Box.js파일을 생성한 뒤 작성하겠습니다.

import React from 'react';
import {View, StyleSheet} from 'react-native';

function Box() {
  return (
    <View style={styles.box} />
  );
}



const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  }
});



export default Box;

StyleSheet는 react-native 모듈에서 import를 할 수 있습니다.

 

새로운 스타일을 선언 할때는 StyleSheet.create를 선언하고 그 안에서 스타일을 작성합니다.

 

이 후 App 컴포넌트로 돌아가 Greeting를 Box 컴포넌트로 변경해주세요.

다음과 같이 나타날 것입니다.

---

이 다음에 하다보면 useState를 쓰는 부분이 있는데 왜 자꾸 true를 줬는데도 오류가 나는건지,,