코드를 저장하고, 그림 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]]}
        />
      );
    }
    
    
    
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.