[번역] 리액트 Compound Component 잘 사용하기

원문 : https://itnext.io/unlock-the-full-potential-of-react-with-the-compound-components-pattern-495a1bdb8b8f

🔥 Best Practices of React Compound Components Pattern: Unlock the Full Potential

Compound Component 패턴이란?

컴파운드 컴포넌트 패턴(복합 컴포넌트 패턴)은 복잡한 컴포넌트를 만들기 위해 작은 컴포넌트들을 합성하는 것

• 내부적으로 캡슐화된 상태를 공유
• 보통 컨텍스트(상태)를 가진 부모 컴포넌트, 상태를 제공받아 사용하고 업데이트하는 자식 컴포넌트로 구성됨

<Modal>
  <Modal.Header>
    Confirm action
  </Modal.Header>
  <Modal.Body>
    Are you sure?
  </Modal.Body>
  <Modal.Footer>
    <button onClick={handleConfirm}>Confirm</button>
  </Modal.Footer>
</Modal>

---

Compound Component 모범 사례

모범 사례 1:

컴포넌트 간의 관계와 결합 방법에 대해 신중하게 생각하는 것이 중요합니다.

여기에는 최상의 접근 방식을 찾을 때까지 다양한 배치 및 상호 작용을 실험하는 것이 포함될 수 있습니다.

모범 사례 2:

메뉴 및 탭과 같은 단순한 UI 요소에서 양식 및 데이터 시각화와 같은 보다 복잡한 위젯에 이르기까지

광범위한 사용 사례에 적용할 수 있습니다.

핵심은 컴포넌트의 기본 구조를 식별하고 더 작고 관리하기 쉬운 부분으로 나누는 것입니다.

모범 사례 3:

사용자가 사용 방법과 사용 가능한 옵션을 이해할 수 있도록 명확한 API를 제공하는 것이 좋은 경우가 많습니다. 

모범 사례 4:

일부 컴포넌트가 사용되지 않거나 잘못 합성되더라도
전체 컴포넌트가 잘 동작하도록 각 컴포넌트에 합리적인 기본값을 제공하는 것이 중요합니다.

모범 사례 5:

props를 통해 너무 많은 데이터를 전달하지 않는 것이 중요합니다. 
이렇게 하면 prop 드릴링이 발생하고 코드를 유지 관리하기가 더 어려워질 수 있습니다.
대신 Redux 또는 MobX와 같은 컨텍스트 또는 상태 관리 라이브러리를 사용하는 것이 좋습니다.

모범 사례 6:

종종 컴포넌트 간에 상태를 공유하기 위해 React Context API와 함께 사용됩니다.

모범 사례 7:

shouldComponentUpdate, 메모이제이션 또는 코드를 최적화하는 기타 기술을 사용하여
불필요한 렌더링을 피하는 것이 중요합니다.

모범 사례 8:

"Render Props" 패턴 또는 "Higher-Order Components" 패턴과 같은

다른 디자인 패턴과 결합하여 훨씬 더 강력하고 유연한 컴포넌트를 만들 수 있습니다.

---

React Compount Component 패턴 설계

먼저 컴포넌트의 상태를 통합관리(오케스트레이션)하는 최상위 컨텍스트 컴포넌트를 정의합니다.

이를 부모 컴포넌트라 합니다.

보통 dot syntex를 사용할 수 있도록 아래와 같이 구성합니다.

const Modal = ({ children }) => {
  const childrenArray = React.Children.toArray(children);
  const header = childrenArray.find(child => child.type === Modal.Header);
  const body = childrenArray.find(child => child.type === Modal.Body);
  const footer = childrenArray.find(child => child.type === Modal.Footer);

  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
};

Modal.Header = ({ children }) => {
  return <div className="modal-header">{children}</div>;
};

Modal.Body = ({ children }) => {
  return <div className="modal-body">{children}</div>;
};

Modal.Footer = ({ children }) => {
  return <div className="modal-footer">{children}</div>;
};

이 예제에서 Modal 컴포넌트는 Modal.Header, Modal.Body 및 Modal.Footer 세 가지 서브 컴포넌트를 정의합니다.
이러한 각 서브 컴포넌트는 Modal 컴포넌트 객체의 속성으로 정의됩니다.

 

Modal 컴포넌트의 렌더링 메서드에서
서브 컴포넌트는 점 표기법을 사용하여 액세스하고, 컴포넌트의 적절한 위치에 렌더링 합니다.

 

이 패턴을 사용하면 자식 컴포넌트를 쉽게 설정하고 부모 컴포넌트 내에서 재사용할 수 있습니다.
즉 React 코드를 구조화하는 보다 유연하고 모듈화된 방법을 제공합니다.

복합 컴포넌트 패턴의 주 단점 중 하나는,

부모 컴포넌트의 직계 자식만 props에 액세스할 수 있다는 것입니다.

즉, 이러한 컴포넌트를 다른 컴포넌트로 래핑할 수 없습니다.

---

Context API를 사용하여 복합 컴포넌트 간 상태 공유

Context API를 사용하면
props를 통한 전달 없이 자식 컴포넌트 간 상태 또는 정보를 쉽게 공유할 수 있습니다.

const ModalContext = createContext({});

const Modal = ({ children }) => {
  const [isOpened, setIsOpened] = useState(false)

  const childrenArray = React.Children.toArray(children);
  const header = childrenArray.find(child => child.type === Modal.Header);
  const body = childrenArray.find(child => child.type === Modal.Body);
  const footer = childrenArray.find(child => child.type === Modal.Footer);

  return (
    <ModalContext.Provider value={{ isOpened, setIsOpened }}>
      <div className="modal">
        <div className="modal-header">{header}</div>
        <div className="modal-body">{body}</div>
        <div className="modal-footer">{footer}</div>
      </div>
    </ModalContext.Provider>
  );
};

Modal.Header = ({ children }) => {
  const {setIsOpened} = useContext(ModalContext)
  return <div className="modal-header">{children}<button onClick={() => setIsOpened(false)}>X</button></div>;
};

Modal.Body = ({ children }) => {
  return <div className="modal-body">{children}</div>;
};

Modal.Footer = ({ children }) => {
  const {setIsOpened} = useContext(ModalContext)
  return <div className="modal-footer">{children}<button onClick={() => setIsOpened(false)}>Close</button></div>;
};​

ModalContext는 createContext()를 사용하여 생성되며
useContext() 후크를 사용하여 Modal.Header 및 Modal.Footer 컴포넌트에

isOpened 상태 및 setIsOpened 함수를 제공하도록 합니다.

 

Header 컴포넌트는 ()=>setIsOpened(false) 함수를 호출하는 닫기 버튼을 포함하도록 하여

사용자가 클릭 시 모달을 닫을 수 있게 해줍니다.

마찬가지로 클릭 시 모달을 닫는 버튼을 포함하도록 Footer 컴포넌트도 업데이트 합니다.

 

---

리액트 컴포넌트는 로직과 렌더링 둘 다 처리할 수 있어, 관심사가 애매할 수 있으나,
옵션과 상태, 함수 모두 사용자 인터랙션 관점에서 설계하면 좋다.
컴포넌트 구조도 최대한 사용자가 보는 모습을 반영하면 좋다.
리액트를 이용한 화이트테스트(integration, e2e)에서도 유사한 논리를 사용한다