리액트 네이티브를 다루는 기술: 2.5 StyleSheet로 컴포넌트에 스타일 입히기

리액트 네이티브에서는 별도의 CSS 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyleSheet라는 것을 사용합니다. 예를 들어, 다음과 같이 작성한답니다.

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 등을 따로따로 설정해야 합니다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.