[React][속성공부] ...rest? 넌 뭐하는 애니? in Component props

부모 컴포넌트 내 자식 컴포넌트 호출부

<Component a={"valueA"} b={2} c={"valueC"} />

 

자식 컴포넌트 선언부

// ...

const Component = () => {
  const {
    a,
    b,
    ...rest
  } = props;

  // ...
}

 
컴포넌트 내 props에서 부모에서 보내지 않은 값을 받는 부분이 보인다.

뭐하는 앨까?
 

...rest

부모 컴포넌트로부터 전달된 모든 속성을 담은 객체를 받을 수 있다.
 
 
 
자식 컴포넌트에서는 다음과 같이 ...rest를 이용하여 모든 속성을 받을 수 있다.

const Component = ({ a, b, ...rest }) => {
  // a와 b는 직접 사용 가능
  // ...rest에는 c와 같은 추가 속성이 들어있다

  return (
    <div>
      <p>A: {a}</p>
      <p>B: {b}</p>
      {/* ...rest를 통해 동적으로 처리할 수 있는 다른 속성들 */}
    </div>
  );
};

 
다른 변수를 사용하여 부모 컴포넌트로부터 속성을 받아올 수 있다. "...rest"는 주로 관례적으로 사용되는 표현일 뿐이며, 사용자가 편리하게 읽을 수 있는 다른 변수명으로 변경할 수 있다.
 
변수명은 중요하지 않으나, 개발자들 간의 의사소통이나 코드의 가독성을 높이기 위해 적절한 변수명을 선택하는 것이 좋다.
 
예를 들어, otherProps가 다른 변수의 좋은 예인 것 같다.