리액트 네이티브를 다루는 기술: 2.6 Props 객체 구조 분해 할당

구조 분해 할당은 함수의 파라미터에서도 활용할 수 있습니다. 예를 들어, 다음과 같은 함수가 있다고 가정해봅시다.

function print(params) {
  console.log(params.name);
  console.log(params.description);
}

만약 구조 분해 할당을 사용한다면 이 코드를 다음과 같이 작성할 수 있습니다.

function print({name, description}) {
  console.log(name);
  console.log(description);
}

어떤가요? 훨씬 더 간결하죠? 이제 이 문법을 Box 컴포넌트에 적용해봅시다!

Box.js

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

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

(...)

이 책에서는 앞으로 Props를 사용할 때 이렇게 구조 분해 할당을 사용할 것입니다.

신간 소식 구독하기

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