더북(TheBook)

코드를 저장하고, 그림 2-9에서처럼 여전히 모서리가 부드러운지 확인해보세요.

Boolean 타입의 Props를 설정할 때는 코드를 다음과 같이 간소화할 수도 있습니다.

<Box rounded />

이렇게 Props의 이름만 적어주면 이 값을 true로 설정합니다.

 

2.5.1.2 다양한 크기 구현하기

컴포넌트에 size라는 Props를 small, medium, large로 설정해 다양한 크기로 보여주는 방법을 배워봅시다.

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


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