JSX 스프레드 구문을 사용하여 props 전달하기

가끔씩 props를 전달하는 것이 매우 반복적일 수 있습니다.

 

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

 

반복적인 코드는 문제가 없습니다. 가독성이 좋을 수도 있습니다.

그러나 때로는 간결함을 더 중요시할 수 있습니다.

일부 컴포넌트는 Avatar와 같이 모든 props를 자식 컴포넌트로 전달합니다.

그들은 직접 props 중 하나도 사용하지 않기 때문에 더 간결한 "스프레드" 구문을 사용하는 것이 의미가 있을 수 있습니다.

 

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

 

 

이렇게 하면 Profile의 모든 props가 개별적으로 나열되지 않고도 Avatar에 모두 전달됩니다.

 

스프레드 구문을 사용할 때는 분별하여 사용하세요. 

거의 모든 컴포넌트에서 사용하고 있다면 문제가 있을 수 있습니다.