[react.js]비구조화 할당 방법

비구조화 할당

말이 좀 어려워서 저도 이 말을 처음에 듣고 뭔말인가 했었는데요. 구조화 되어 있는걸 파괴(비구조화) 한다는 뜻입니다. 본래 구조 대로 적었다면 훨씬 많은 텍스트를 적었어야 했는데, 구조를 깸으로서 간소화시켜주는 겁니다.

App.js

import React, { Component } from 'react';
import FunctionTest from './FunctionTest';

class App extends Component {
  render() {
    return (
      <div>
        <FunctionTest hello="test" />
      </div>
    );
  }
}

export default App;

FunctionTest.js

import React from 'react';

const FunctionTest = props => {
  //   const hello = props.hello;
  const { hello } = props;
  return <div>{hello}</div>;
};

export default FunctionTest;

여기서 한단계 더 간편하게 처리 할 수 있는 방법이 있어요.

import React from 'react';

const FunctionTest = ({ hello }) => {
  //   const hello = props.hello;
  //   const { hello } = props;
  return <div>{hello}</div>;
};

export default FunctionTest;

훨씬 간편해졌죠?