재사용하기 쉬운 컴포넌트 (1)

엄강우·2022년 6월 15일
0

You don't know React

목록 보기
3/9

motivation

위의 영상을 보고 저도 한번 만들어 보고 싶다는 생각이 들어서 시작하였습니다(?) 하지만 생각보다 제가 모르는 부분이 많아서 모르는 부분을 천천히 익혀가면서 실습을 해보도록 하겠습니다.

Compound Component

컴파운드 컴포넌트는 컴포넌트 패턴의 일종이라고 할 수 있습니다. 내부에서는 데이터를 공유하며 내부 컴포넌트로 추상화하지만 이외의 로직 작성은 독립적으로 하게끔 설계하는 패턴입니다.

간단하게 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>
 )
}

코드는 맥락을 이해하는데 필요한 부분만 작성 하였습니다.

context

props drilling을 막기위해 context를 이용하였습니다. 내부적으로 데이터를 공유할 필요가 있었으며 전역 state관리까지는 필요하지 않기 때문에 context를 사용하기에 매우 적합한 환경이라고 할 수 있습니다.

내부적 추상화

Toggle이라는 가장 밖 컴포넌트를 기준으로하여 TitleButton은 내부적으로 추상화가 되어있고 할 수 있습니다. 이 뜻은 어느정도 할일이 정해져 있다는 의미 입니다. 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

profile
안녕하세요 프론트엔드 개발자를 꿈꾸는 엄강우입니다.

0개의 댓글