Props 객체 구조 분해 할당

Props 객체 구조 분해 할당이란 컴포넌트에서 Porps를 조회하는 코드를 더 짧게 구현하는 방법이다.

구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당'이라고 부르기도 한다. 이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다.

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

function PropsNotSeparated(props) {
  return (
    <View>
      <Text>name: {props.name}</Text>
      <Text>birth: {props.birth}</Text>
    </View>
  );
}

function PropsSeparated({name, birth}) {
  return (
    <View>
      <Text>name: {name}</Text>
      <Text>birth: {birth}</Text>
    </View>
  );
}

export default PropsSeparated;

상단 함수 PropsNotSeparated는 props 값을 객체로 받고있지만, 그 아래 함수 PropsSeparated는 props를 객체 구조 분해 할당하여 받고있다. 이처럼 객체 구조 분해 할당 형태로 props를 받게 되면 더욱 짧은 코드를 작성할 수 있다.

 

props를 설정해 정상적으로 값이 출력되는지 확인해보자.

import React from 'react';
import {SafeAreaView} from 'react-native';
import PropsSeparated from './component/PropsSeparated';

const App = () => {
  return (
    <SafeAreaView>
      <PropsSeparated name="devbeekei" birth="10월 20일" />
    </SafeAreaView>
  );
};

export default App;