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

2.5.1.3 사각형 색상 변경하기

이번에는 color Props로 사각형의 색상을 변경하는 방법을 알아보겠습니다. color 값은 정말 다양하므로 크기를 위한 Props를 구현할 때처럼 사전에 스타일을 미리 선언하는 방식은 힘듭니다. 그 대신 Props로 받은 값을 스타일로 직접 넣어주면 쉽게 구현할 수 있습니다.

Box 컴포넌트를 다음과 같이 수정해보세요.

components/Box.js

import React from 'react';
import {View, StyleSheet} from 'react-native';

function Box(props) {
  return (
    <View
    style={[
       styles.box,
       props.rounded && styles.rounded,
       sizes[props.size],
       {
        backgroundColor: props.color,
       },
      ]}
    />
  );
}

Box.defaultProps = {
  size: 'medium',
  color: 'black',
};

(...)

신간 소식 구독하기

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