ES6 destructuring 문법 <props>

---

destructuring 문법

=> 구조화된 배열이나 객체를 분해하는 방법

(부모 컴포넌트)

import Child from "./Child";

export default function Home() {
  let item = "test"
  return (
    <div>
      <Child item={item} />
    </div>
  );
}

보통 props를 전달하기 위해서,

부모는 자식함수 호출과 동시에 props를 보내주는 형식을 사용한다.

(자식 컴포넌트 <destructuring 문법 사용 전>)

export default function Child(props){
  return(
    <div>
      {props.item}
    </div>
  )
}

자식은 부모의 props를 받고 부모 객체에 접근할 수 있다.

(자식 컴포넌트 <destructuring 문법 사용 후>)

export default function Child({item}){
  return(
    <div>
      {item}
    </div>
  )
}

 

하지만, destructuring 문법을 사용하게 되면,

props => { 전달받은 변수 }처럼 객체를 분해한 뒤,

props. 변수 => 이렇게 접근하지 않고 바로 {변수}처럼 사용할 수 있다.

---

되게 별거 아닌 것 같은데, 신기한 문법이다.

하지만 나는 props를 사용해야 부모에게 전달받은 객체라는 걸 인식하는 게 쉬워서

이 문법을 잘 사용하지는 않을 것 같다.

그래도 알아두면 좋은 상식!