유연하고 표현력이 풍부한 React 구성 요소 구축

때로는 재사용이 가능하면서도 무수한 상황에 적응할 수 있도록 매우 유연한 구성 요소를 구축해야 하는 상황에 처하게 됩니다. 토글, 탭 탐색 또는 아코디언과 같은 것일 수 있습니다. 이러한 문제를 해결하는 데 환상적이라고 생각하는 패턴은 복합 구성 요소입니다. 여러 구성 요소가 결합되지만 유연한 방식으로 함께 작동하는 경우입니다.

이 아코디언을 복합 구성 요소로 빌드하는 방법을 살펴보겠습니다.

You can find an interactive version of this article with some extracurricular information over here.

이 아코디언은 세 가지 구성 요소로 구성됩니다. 하나는 토글 버튼용, 다른 하나는 접을 수 있는 콘텐츠용, 모든 것을 하나로 묶는 상위 요소입니다. 사용할 때의 모습은 다음과 같습니다.

<Accordion>
  <div>
    <Accordion.Toggle eventKey="item1">Item 1</Accordion.Toggle>
    <Accordion.Content eventKey="item1">Content 1...</Accordion.Content>
  </div>
  <div>
    <Accordion.Toggle eventKey="item2">Item 2</Accordion.Toggle>
    <Accordion.Content eventKey="item2">Content 2...</Accordion.Content>
  </div>
  <div>
    <Accordion.Toggle eventKey="item3">Item 3</Accordion.Toggle>
    <Accordion.Content eventKey="item3">Content 3...</Accordion.Content>
  </div>
</Accordion>

여기서 주목해야 할 몇 가지 사항이 있습니다. 먼저 <Accordion.Toggle> 및 <Accordion.Content>를 본 적이 없다면 조금 이상하게 보일 수 있지만 <Toggle> 및 <Content> 구성 요소가 <Accordion>에 정적 속성으로 추가되기 때문입니다. 이것은 어떤 식으로든 요구 사항은 아니지만 함께 사용하도록 의도된 밀접하게 결합된 구성 요소를 다루고 있음을 더 명확하게 만든다고 생각합니다.

If you've ever used Reach UI or React Bootstrap this probably looks familiar to you. They use this pattern for accordions and other components.

두 번째로 <Toggle> 및 <Content> 구성 요소는 <Accordion> 의 직계 자식이 아닙니다. 이는 구성 요소 간에 데이터를 전달하기 위해 Context를 사용하기 때문에 가능합니다. 이는 아코디언의 모양과 작동 방식에 많은 유연성을 제공합니다.

상위 구성 요소<Accordion>가 구현되는 방법은 다음과 같습니다.

const AccordionContext = React.createContext()

function Accordion({ children }) {
  const [activeKey, setActiveKey] = useState(null)

  const setKey = (newKey) => {
    if (newKey === activeKey) setActiveKey(null)
    else setActiveKey(newKey)
  }

  return <AccordionContext.Provider value={{ activeKey, setKey }}>{children}</AccordionContext.Provider>
}

여기에서 풀어야 할 부분이 있으므로 맨 위에서 시작하겠습니다. 구성 요소를 연결하는 데 사용할 AccordionContext라는 컨텍스트를 만듭니다. 그런 다음 activeKey 상태를 설정하여 현재 열려 있는 "탭"키를 유지하고 상태를 업데이트하여 아코디언을 열고 닫는 함수를 만듭니다. 마지막으로 children 및 <Provider> 를 사용하여 객체로 설정한 값인 컨텍스트activeKey에 래핑된 구성 요소setKey를 반환합니다.

이 설정을 사용하여 구현이 다음과 같은 위치<Content>를 살펴볼 수 있습니다.

function Content({ children, eventKey }) {
  const { activeKey } = useContext(AccordionContext)

  if (activeKey !== eventKey) return null

  return children
}

우리는 activeKey에서 AccordionContext를 얻고 소품 eventKey와 일치하지 않으면 null를 반환하고 그렇지 않으면 children를 반환합니다.

마지막으로 <Toggle>의 모양은 다음과 같습니다.

function Toggle({ children, eventKey }) {
  const { setKey } = useContext(AccordionContext)

  return <button onClick={() => setKey(eventKey)}>{children}</button>
}

여기서 우리는 setKey에서 AccordionContext를 가져오고 사용자가 버튼을 클릭하면 토글eventKey을 유일한 인수로 사용하여 호출합니다.

이것으로 아코디언이 완성되었습니다! 전체 구현here을 찾을 수 있습니다.

요약: Context를 사용하여 암시적 상태를 공유하는 여러 구성 요소에 걸쳐 구현을 분할하여 아코디언을 위한 보다 표현력 있고 유연한 API를 만들었습니다. 갑자기 콘텐츠 아래에 아코디언 버튼을 추가하기로 결정했다면 구현이 아닌 사용법만 변경하면 됩니다. 이것은 복합 구성 요소의 가장 큰 이점 중 하나입니다.

이 글을 통해 복합 구성 요소가 유용한 이유와 시기에 대한 통찰력을 얻으셨기를 바랍니다. 모든 React 개발자 도구 상자의 도구여야 한다고 생각합니다.

제안이나 피드백이 있으면 언제든 연락주세요!

읽어 주셔서 감사합니다!