[ react ] 구조분해할당

장점

• 배열의 index를 이용하지 않고 변수에 값을 정의할 수 있다.
• 코드를 줄일 수 있다.

import React from 'react';

function Food(props) {
  console.log(props);
  return <h3>I like {props.fav}</h3>;
}

function App() {
  return(
    <div>
      <h1>Hello World</h1>
      <Food fav="kimchi"/>
    </div>
  );
}

export default App;

구조분해할당

// 구조분해할당 방법1.
function Food(props){
  { fav } = props;
  return <h1> I like {fav}</h1>;
}


// 구조분해할당 방법2.
function Food({fav}){
return <h1> I like {fav}</h1>;
}

• 위의 두가지 방법 중 아무거나 사용해도 된다.

연습 예제

  let arr = ["Bora", "Kim"]

  // arr 배열에 index를 이용해서 새로운 변수에 값을 담지 않고도 데이터를 복사할 수 있다.
  // 코드를 줄일 수 있다.
  let [ firstName, surName ] = arr;
  console.log(firstName);
  console.log(surName);

  // split를 이용할 수도 있다.
  let [ firstName2, surName2 ] = "Gildong Hong".split(" ");
  console.log(firstName2);
  console.log(surName2);

  // 필요하지 않은 데이터는 쉼표,를 이용해서 사용하지 않을 수도 있다.
  // 배열의 값중에 담고 싶지 않은 데이터를 담지 않을 수 있다.
  let [firstName3, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

  console.log(firstName3);
  console.log(title);


  //  할당 연산자 좌측에는 '할당할 수 있는(assignables)' 것이라면 어떤 것이든 올 수 있다.
  // 아래와 같이 객체 프로퍼티도 가능하다.

  let user = {};
  [ user.name, user.surname ] = "Gilsoon Hong".split(" ");
  console.log(user);

참고 사이트 
https://ko.javascript.info/destructuring-assignment