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
Author And Source
이 문제에 관하여(JSX Spread Operator), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ayaan92/JSX-Spread-Operator저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)