리액트 네이티브를 다루는 기술: 2.5.1 Props로 컴포넌트 스타일을 커스터마이징하기

props.color 값을 사용해 스타일 객체를 직접 만들어 컴포넌트에 스타일을 적용해줬습니다. 그리고 defaultProps로 color Props를 설정하지 않았다면 기본적으로 검은색을 사용하도록 했습니다.

자, 이제 컴포넌트의 색상을 파란색으로 만들어봅시다. App 컴포넌트를 열어 Box 컴포넌트에 color Props를 설정해보세요. 그림 2-11처럼 색상이 잘 바뀌었나요?

App.js

import React from 'react';
import {SafeAreaView} from 'react-native';
import Box from './components/Box';

const App = () => {
  return (
    <SafeAreaView>
      <Box rounded={true} size="large" color="blue" />
    </SafeAreaView>
  );
};

export default App;

▲ 그림 2-11 파란색 사각형

신간 소식 구독하기

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