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

slide 1 of 18, currently active
slide 2 of 18
slide 3 of 18
slide 4 of 18
slide 5 of 18
slide 6 of 18
slide 7 of 18
slide 8 of 18
slide 9 of 18
slide 10 of 18
slide 11 of 18
slide 12 of 18
slide 13 of 18
slide 14 of 18
slide 15 of 18
slide 16 of 18
slide 17 of 18
slide 18 of 18

이제 컴포넌트를 새로 만들어 직접 스타일링해봅시다. components 경로에 Box.js를 만들고 다음과 같이 코드를 입력해보세요.

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 모듈에서 불러와서 사용할 수 있습니다. 새로운 스타일을 선언할 때는 StyleSheet.create 함수를 사용하며, 그 안에 스타일들을 작성합니다. 그리고 특정 컴포넌트에 스타일을 적용할 때는 style Props를 설정하면 됩니다.

신간 소식 구독하기

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