⚛️ 리액트 패턴 : Compound Components (합성 컴포넌트)

⚛️ 리액트로 개발하다 보면 state 관리를 잘하기 위해 주의를 많이 하곤 한다.
🏗️ 컴포넌트들을 타고 내려 가며 사용처까지 프롭스로 전달해야 하다 보면 context api나 리덕스 등의 도구들도 종종 활용하기도 한다. 하지만 이런 방법들은 코드를 복잡하게 하거나 좀 과도한 접근일 때가 있다.

🔅 외부 라이브러리를 활용하지 않고 리액트 자체의 기능으로도 프롭스 전달을 효율적으로 할 수 있는 방법들이 있는다. 먼저 컴파운드 컴포넌트를 사용할만한 문제 상황인 prop drilling과 리액트 내부적으로 해결할 수 있는 방법들인 context api와 컴파운드 컴포넌트에 대해 살펴보자.

🪛 Prop drilling

"drilling"이라는 말에서 유추할 수 있듯이 드릴로 구멍을 뚫는 것처럼, 아무런 관계도 없는 데이터를 사용처까지 전달하기 위해 사이의 컴포넌트들을 뚫고 갈 경우를 prop drilling이라고 한다. 즉, prop drilling 는 중첩된 컴포넌트 레이어들 간에 데이터를 계속 전달하여, 깊이 중첩된 사용처 컴포넌트까지 전달하는 경우를 일컫는다. 이렇게 정보를 전달하다 보면 사용처에 도달하기까지 불필요한 중간 단계 컴포넌트들을 거쳐가야 한다.

 

종종 중첩된 컴포넌트들을 다루다 보면 prop drilling을 경험해 봤을 수 있다.

예를 들면 다음과 같은 drop down 컴포넌트를 만든다고 해보자.

Solution 1 : Context API

Context API는 context provider로 감싼 여러 컴포넌트들 간에  state과 데이터를 공유할 수 있도록 해준다.

useContext 훅을 통해 해당 state나 context에 접근할 수 있도록 한다.

 

위의 drop down 컴포넌트를 context api로 간단하게 한번 만들어보자.

• DropDownContext.jsx : 드롭다운 열림/닫힘 state 관리

import React, { createContext, useContext, useState } from 'react';

// Create the context
const DropdownContext = createContext();

// Create a custom hook to use the DropdownContext
const useDropdown = () => {
  return useContext(DropdownContext);
};

// Create the provider component
const DropdownProvider = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(prevState => !prevState);
  };

  const value = {
    isOpen,
    toggleDropdown,
  };

  return (
    <DropdownContext.Provider value={value}>
      {children}
    </DropdownContext.Provider>
  );
};

export { DropdownProvider, useDropdown };

 

• DropDown.jsx : 드롭다운 전체를 감쌀 메인 컴포넌트

import React from 'react';

const Dropdown = ({ children }) => {
  return (
    <div className="dropdown">
      {children}
    </div>
  );
};

export default Dropdown;

 

• DropdownItems.jsx : 드롭다운 선택 항목들

import React from 'react';

const DropdownItems = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return items.map(item => <p key={item}>{item}</p>);
};

export default DropdownItems;

• DropdownMenu.jsx : 드롭다운 열림/닫힘 에 따라 보일 메뉴

import React from 'react';
import { useDropdown } from './DropdownContext';

const DropdownMenu = ({ children }) => {
  const { isOpen } = useDropdown();

  return (
    isOpen ? (
      <div className="dropdown-menu">
        {children}
      </div>
    ) : null
  );
};

export default DropdownMenu;

 

• DropdownToggle.jsx : 드롭다운 열림/닫힘 버튼

import React from 'react';
import { useDropdown } from './DropdownContext';

const DropdownToggle = ({ children }) => {
  const { toggleDropdown } = useDropdown();

  return (
    <button className="dropdown-toggle" onClick={toggleDropdown}>
      {children}
    </button>
  );
};

export default DropdownToggle;

• App.jsx : 사용

import React from 'react';
import { DropdownProvider } from './DropdownContext';
import Dropdown from './Dropdown';
import DropdownToggle from './DropdownToggle';
import DropdownMenu from './DropdownMenu';
import DropdownItems from './DropdownItems';
const App = () => {
  return (
    <div className='App'>
      <DropdownProvider>
        <Dropdown>
          <DropdownToggle>Toggle Dropdown</DropdownToggle>
          <DropdownMenu>
            <DropdownItems />
          </DropdownMenu>
        </Dropdown>
      </DropdownProvider>
    </div>
  );
};
export default App;

 

contextAPI를 통해서 dropdown 여닫음 상태를 공유할 수 있게 된다. Prop drilling 문제를 해결할 수 있다.

 

👉 react playground : https://playcode.io/1961630

contextAPI_dropdown_example

---

 

하지만 contextAPI로 작성했을 때 다음과 같은 문제점들이 있을 수 있다.

1. 성능 이슈 : context value를 업데이트할 경우, 불필요한 리랜더링이 발생할 수 있다.
리액트에서는 자식 컴포넌트에서 state 변화가 발생하면 무조건 리랜더링이 발생한다. 이렇게 공유한 context가 app 전체에 쓰일 경우, 여기저기서 윈치 않은 리랜더링이 발생할 수 있다는 문제가 있다.

2. 테스트 복잡도 증가 : 프롭스 기반으로 state 관리를 하는 경우보다 테스트를 하기가 까다롭다. mock나 적절한 context value를 제공하기 위해 추가적으로 세팅을 해야 하고 유닛 테스트 과정을 더 복잡하게 만들 수 있다.

3. 무분별한 남용 가능성 증가 : state관리가 너무 쉬워진다는 생각에 모든 컴포넌트의 state를 context API로 공유하면 되지 않냐 싶을 수 있다. 하지만 컴포넌트 간의 결합도가 너무 높아져서 코드를 이해하기도 유지하기도 어려워진다. 
위의 경우에서도 하나의 기능을 위해 코드 여기저기를 넘나들어야 한다는 불편함을 느꼈을 수도 있다.

4. 타입 안정성 결여 : Context value들은 디폴트로 타입 체크가 되지 않아서 컴파일러나 개발 도구들이 context value의 타입이 부적적하게 변경되거나 사용되어도 감지하지 않을 수도 있다. 

5. 확장성 결여 : 규모가 있는 서비스의 경우 context api 관리가 어려울 수 있다. 여러 의존성과 context를 업데이트하는 과정에서 중복과 일관성을 헤치는 일이 발생할 수 있다.

6. 개발 도구와 미들웨어 부재 : 리덕스와 같은 상태 관리 라이브러리 도구들과는 달리 context api 자체적으로 디버깅이나 테스트 등을  도와줄 도구들이 없다는 점에서 아쉽다.

Solution 2 : Compound Components

Compound Component는 열거 컴포넌트들이 암묵적인 state를 백그라운드에서 공유하도록 설계하는 리액트 패턴이다.

여러 컴포넌트들 간에 같은 state과 로직을 공유해야 할 경우 이 패턴을 활용할 수 있는데,

이전 contextAPI로 작성했던 드롭다운 코드를 Compound Components로 구현해 보자.

 

• Dropdown.jsx : 드롭다운 관련 Compound Components

import React, { useState } from 'react';

// Dropdown component
const Dropdown = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(prevState => !prevState);
  };

  return (
    <div className="dropdown">
      {children.map((child,index) => React.cloneElement(child,{ isOpen, toggleDropdown })
    )}
    </div>
  );
};

// DropdownToggle component
const DropdownToggle = ({ children, toggleDropdown }) => {
  return (
    <button className="dropdown-toggle" onClick={toggleDropdown}>
      {children}
    </button>
  );
};

// DropdownMenu component
const DropdownMenu = ({ children, isOpen }) => {
  return isOpen ? <div className="dropdown-menu">{children}</div> : null;
};

const DropdownItems = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  return items.map(item => <p key={item}>{item}</p>);
};

Dropdown.Toggle = DropdownToggle;
Dropdown.Menu = DropdownMenu;
Dropdown.Items = DropdownItems;

export default Dropdown;

 

⚠️ 사실 React.cloneElement 사용은 권장하지 않는다.  다음 시간에는 대체하여 구현할 수 있는 방법들을 살펴보자.  

<div className="dropdown"> 
	{children.map((child,index) => React.cloneElement(child,{ isOpen, toggleDropdown }) )} 
</div>​

 

• App.jsx : 사용

import React from 'react';
import Dropdown from './Dropdown';

export function App() {
  return (
    <div className='App'>
      <Dropdown>
      <Dropdown.Toggle>Toggle Dropdown</Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Items/>
      </Dropdown.Menu>
    </Dropdown>
    </div>
  );
}

 

👉 react playground : https://1961651.playcode.io

React Playground

 

이전 contextAPI를 사용했을 때보다 깔끔하고 직관적이다. 그리고 Dropdown.Toggle은 토글 버튼 기능만, Dropdown.Menu는 열렸을 때만 메뉴들을 보여주는 기능만, Dropdown.Items는 아이템 나열 기능만 있기 때문에 관심사 분리가 잘된다.

 

Compound Components를 사용 시 장점들로 정리할 수 있다.

1. 재사용성 증가 : Compound component 내 개별 컴포넌트를 여러 군데 재사용할 수 있어서 코드 복잡도를 줄이고 유지보수하기 쉽다.

2. 유연성 증가 : 프롭스 전달 걱정을 줄이고 커스텀 화하고 재사용하기 쉽게 컴포넌트들을 구성할 수 있다.

3. 관심사 분리 : Compound component의 각 자식 컴포넌트는 하나의 기능을 담당하기 때문에 전체 코드에 영향을 줄 걱정 없이 유지보수를 할 수 있다. 

4. 직관적 API  : 각 관련 자식 컴포넌트들을 부모 컴포넌트로 감싸주기 때문에 동료 개발자들 또한 이해하기 쉬운 패턴이다.

5. 커스터마이징에 용이 : Compound component 패턴은 자식 컴포넌트를 변경하거나 확장하기 쉽도록 한다. 예를 들면, 이전의 Item을 바꾸고 싶을 때 Dropdown.Items만 변경해 주면 된다. 

6. Prop Drilling 감소 : props를 통해 state를 전달하는 대신 엘리먼트들을 자식으로 전달한다.

7.  유지보수 용이 : props를 추적하는 과정도 줄이고, state 공유 방식이 더 단순하기 때문에 디버깅이 쉬워진다.

---

🍀 마치면서

오늘은 prop drilling이 어떤 건지, 그리고 리액트 내부적인 기능들로 해결하는 방법들 중 contextAPI와 compound components pattern에 대해 살펴봤다.
다름이 아니라 vinylify 프로젝트를 하면서 compound components 방식으로 구현할 수 있다는 걸 처음 알게 되었다. 
의외로 상태관리 라이브러리를 들여온다던가 복잡한 무언가를 추가하는 것보다는 적절한 내부 기능을 활용하는 방법을 알아가는 시간이었다.
vinylify에서의 compound components 활용 대해서는 회고 겸 다음 시간에 다뤄보도록 하겠다.

📚 References

https://react.dev/reference/react/useContext

useContext – React

 

https://medium.com/@vitorbritto/react-design-patterns-compound-component-pattern-ec247f491294

React Design Patterns: Compound Component Pattern