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

slide 1 of 18, currently active
slide 2 of 18
slide 3 of 18
slide 4 of 18
slide 5 of 18
slide 6 of 18
slide 7 of 18
slide 8 of 18
slide 9 of 18
slide 10 of 18
slide 11 of 18
slide 12 of 18
slide 13 of 18
slide 14 of 18
slide 15 of 18
slide 16 of 18
slide 17 of 18
slide 18 of 18

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

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를 사용할 때 이렇게 구조 분해 할당을 사용할 것입니다.

신간 소식 구독하기

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