감싸진 요소에 props 전달하기

forwarded props(proxy props)

export default function Section({ title, children, id,className }) {
  return (
    <section id={id} className={className}>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

section 컴포넌트에서 css 스타일링을 위해 id,className등을 props 로 전달 해야 할때 다음과 같이 하나하나 구조 분해할당을 통해 수동으로 설정할 수 있지만 이는 큰 규모의 프로젝트를 하게 된다면 매우 비효율 적인 방법이다
이를 해결하기 위해

export default function Section({ title, children, ...props }) {
  return (
    <section {...props}>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

다음과 같이 작성 가능하다 ...props를 사용 하면 해당 컴포넌트에서 사용 할 수 있는 모든 다른 props를 모아서 props object로 병합한다
이러한 패턴은 내용을 모두 감싸는 wrapper component 작성 시 유용하다