리액트 복합 컴포넌트 설계: cloneElement vs 합성 컴포넌트, 어떤 게 더 이상적인가요

Question

안녕하세요, 리액트로 디자인 시스템을 구축하며 컴포넌트 설계에 대해 고민이 있어 질문드립니다.아토믹 디자인 방법론에 따라 CustomSelect 같은 가장 작은 기본 단위 컴포넌트를 만들었습니다.이제 이 컴포넌트들을 조합해서 아래와 같은 Filter 컴포넌트를 만들려고 합니다. (실제 기능 구현까지는 배재)import clsx from 'clsx' function CustomSelect({size, children}) { return }// 최종적으로 만들고 싶은 Filter 컴포넌트 ... ... 여기서 Filter 내부에 들어가는 CustomSelect들은 모두 size="sm"이라는 공통 prop을 갖습니다.이 공통 prop을 효율적으로 적용하기 위해 두 가지 방법을 고민하고 있습니다.방법 1: Children.map과 cloneElement 사용Filter 컴포넌트가 자식들에게 size prop을 자동으로 주입하는 방식입니다.// Filter.js function Filter({children}) { const injectedChildren = Children.map(children, child => cloneElement(child, { size : 'sm' }) ); return {injectedChildren} } // 사용 시 ... ... 방법 2: 합성 컴포넌트(Compound Components) 사용Filter 전용 Select 컴포넌트를 새로 만들어 사용하는 방식입니다.function Filter({children}) { return {children} } function FilterSelect({children, ...props}) { return {children} } // 사용 시 ... ... 두 방법 모두 간단한 예제라 동일한 결과를 보여주지만, 확장성, 기능성 측면에서 어떤 형식이 더 나은 선택일지 모르겠습니다.실무에서는 어떤 기준을 가지고 이런 복합 컴포넌트를 설계하시나요? 두 방법의 장단점이나 제가 놓치고 있는 부분에 대한 여러 개발자분들의 의견을 들려주시면 큰 도움이 될 것 같습니다 감사합니다.

킁킁탐정 · Accepted Answer

cloneElement는 prop 충돌 문제가 있고 react 공식 문서에도 사용하지 말라고 권하고 있습니다.https://react.dev/reference/react/cloneElement그러므로 새로운 컴포넌트를 만들어서 prop를 위에서 아래로 전달해주는 방식이 기본적으로 맞습니다. 하지만 Tree의 깊은 곳까지 매번 prop를 전달하는건 어렵기 때문에 context를 사용하는게 좋습니다. 최근 몇년간 나오는 대다수의 유명 react 기반 UI Framework는 내부적으로 context를 이용하여 필요한 중요 정보를 캡슐화합니다.

리액트 복합 컴포넌트 설계: cloneElement vs 합성 컴포넌트, 어떤 게 더 이상적인가요

1개의 답변

#frontend 목록