spread operator가 React 컴포넌트에서 어떻게 활용될 수 있는가?

props를 유연하게 전달하는 방식이므로 자주 사용됨!!

obj의 key와 컴포넌트의 prop이 일치하면, spread operator를 구현할 수 있다.

function App() {
   const props = { name: '철수', age: 37 }
   return (
      <Student {...props} />
   )
}

function Student({name, age}) {
   return (
      <div>
         <h1>{name}<h1>
         <span>{age}</span>
      </div>
   )
}

 

property로 name, age를 갖는 props 객체를 App 컴포넌트 내에서 Student 컴포넌트에 넘겨주고 있다.

 

아래 Student prop을 보면 name, age가 있다. 즉, ...props은 name: '철수', age: 37이자

<Student name: '철수', age: 37 />인 것이다.