위의 영상을 보고 저도 한번 만들어 보고 싶다는 생각이 들어서 시작하였습니다(?) 하지만 생각보다 제가 모르는 부분이 많아서 모르는 부분을 천천히 익혀가면서 실습을 해보도록 하겠습니다.
컴파운드 컴포넌트는 컴포넌트 패턴의 일종이라고 할 수 있습니다. 내부에서는 데이터를 공유하며 내부 컴포넌트로 추상화하지만 이외의 로직 작성은 독립적으로 하게끔 설계하는 패턴입니다.
간단하게 Compound Component의 구조를 살펴보면 다음과 같다.
// Toggle.js
export default const Toggle = ({children}) => {
return <ToggleContext.Provider>{children}</ToggleContext.Provider>
}
const Title = () => {
const { title } = useContextHook(context)
return <p>{title}</p>
}
const Button = () => {
const { on, toggle } = useContextHook(context)
return <button type='button' onClick={toggle}>버튼</button>
}
Toggle.Title = Title // 필수적인 부분은 아니지만 편의성을 위해 설정.
Toggle.Button = Button
// index.js
const App = () => {
return (
<Toggle>
<Toggle.Title />
<Toggle.Button />
</Toggle>
)
}
코드는 맥락을 이해하는데 필요한 부분만 작성 하였습니다.
props drilling
을 막기위해 context
를 이용하였습니다. 내부적으로 데이터를 공유할 필요가 있었으며 전역 state
관리까지는 필요하지 않기 때문에 context
를 사용하기에 매우 적합한 환경이라고 할 수 있습니다.
Toggle
이라는 가장 밖 컴포넌트를 기준으로하여 Title
과 Button
은 내부적으로 추상화가 되어있고 할 수 있습니다. 이 뜻은 어느정도 할일이 정해져 있다는 의미 입니다. Title
컴포넌트는 title변수를 표시하기 위한 컴포넌트 이며 Button
컴포넌트는 Toggle을 on, off 하기 위한 목적임을 알 수 있습니다.
Toggle
컴포넌트 내부에 새로운 컴포넌트를 만들어 추가 할 수 있습니다.Title
혹은 Button
컴포넌트가 필요 하지 않을시 꼭 넣지 않아도 됩니다.https://so-so.dev/react/make-select/
https://kentcdodds.com/blog/compound-components-with-react-hooks