JSX Spread Operator

리엑트 프로젝트를 보면 props를 <Component {...props} />와 같은 형태로 전달하는 것을 자주 보았다
느낌상 어떠한 의미인지는 알겠지만 좀 더 정확하게 알고 싶어 찾아보았다

1. Spread Attributes

리엑트에서 attributes를 전달할 때 아래의 두 코드는 같다

// These two are equivalent
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

모든 props가 아니라 특정값들은 선택해서 사용하고 '나머지를 넘겨줌' 느낌으로도 사용이 가능하다

const Button = ({kind, ...rest}) => {
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...rest} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

2. TL; DR

재사용이 가능한 component를 만들 때에는 확장성에도 신경을 써야한다
확장성을 확보하기 위해 spread operator를 이용해 props를 넘겨주는 등을 활용하는 것 같다

*References

• JSX Spread Operator <Component {…props} /> Meaning