비구조화 할당 문법으로 props 추출

props로 값을 전달할 때마다 props.속성을 작성하는 것은 번거로운 일이다.
그래서 비구조화 할당을 사용해서 간단하게 작성하는 법을 사용하자.

 

기존 props를 전달할 때

export default function MyComponent (props){
   return (
      <div>
         {props.name1}는 NewJeans 멤버입니다.<br/>
         {props.name2}는 NewJeans 멤버입니다.<br/>
         {props.children}이는 NewJeans 멤버입니다.<br/>
      </div>
   )
}

비구조화 할당을 사용

export default function MyComponent ({name1, name2, children}){
   return (
      <div>
         {name1}는 NewJeans 멤버입니다.<br/>
         {name2}는 NewJeans 멤버입니다.<br/>
         {children}이는 NewJeans 멤버입니다.<br/>
      </div>
   )
}