small, medium, large 스타일을 준비한 다음, 이 스타일들을 sizes라는 객체에 넣어줬습니다. 그리고 props.size 값을 받아와서 sizes[size]를 조회해 원하는 스타일을 선택했습니다. 추가로 컴포넌트에 size Props가 설정되지 않았을 때는 기본값으로 medium을 사용하도록 defaultProps를 설정했습니다.

App 컴포넌트에서 Box 컴포넌트에 size Props를 large로 설정해 사각형의 크기가 커지는지 확인해보세요.

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" />
    </SafeAreaView>
  );
};

export default App;

▲ 그림 2-10 큰 사각형