반응형
cloneElement
-
[React] cloneElementFront-End(Web)/React - 프레임워크(React, Next) 2023. 3. 22. 03:15
React로 개발하면서, 공통 UI 혹은 기능을 가진 랩핑 컴포넌트를 만드는 경우가 종종 있다. type Props = ButtonHTMLAttributes; function AddTravelerButton({ children, ...props }: PropsWithChildren): JSX.Element { return ( {children} ); } 이 랩핑 컴포넌트에서 Props로 받은 값으로 특정 속성을 만든다고 가정하자. 해당 컴포넌트에서 이 속성값을 사용하는 건 쉽지만, 내부의 {children} 에 이 속성값을 전달할 방법이 전혀 떠오르지 않았다. 이를 구현하기 위해 리서치해본 결과, cloneElement라는 React의 기능을 활용하면 되었다. 💙 cloneElement const clo..