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

이제 컴포넌트를 새로 만들어 직접 스타일링해봅시다. 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를 설정하면 됩니다.

신간 소식 구독하기

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