Compound Component 패턴 (feat. React, Next.js)

Compound components는 React에서 더 표현력 있고 사용자 정의가 가능한 컴포넌트 API를 만들 수 있게 해주는 강력하고 유연한 패턴입니다.

이 패턴은 특히 여러 관련 부분을 가진 복잡한 UI 컴포넌트를 구축할 때 유용합니다.

이 개념에 대해 자세히 알아보고 Next.js에서 어떻게 구현할 수 있는지 살펴보겠습니다.

Compound Components란 무엇인가?

Compound components는 함께 작동하여 일관된 기능 단위를 형성하는 컴포넌트 그룹입니다.

주요 아이디어는 공유 상태와 동작을 관리하는 부모 컴포넌트를 만들고, 자식 컴포넌트가 특정 부분의 렌더링을 처리하도록 하는 것입니다.

Compound components 사용 시 주요 이점

1. 향상된 유연성과 사용자 정의 가능성
2. 관심사의 더 나은 분리
3. 더 직관적이고 선언적인 API
4. 향상된 재사용성

React에서의 기본 예제

사용자 정의 선택 컴포넌트에 대한 compound component 패턴의 간단한 예제로 시작해 보겠습니다.

const Select = ({ children, onChange }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectContext.Provider value={{ selectedOption, setSelectedOption, onChange }}>
      <div className="select">{children}</div>
    </SelectContext.Provider>
  );
};

const Option = ({ value, children }) => {
  const { selectedOption, setSelectedOption, onChange } = useContext(SelectContext);

  const handleClick = () => {
    setSelectedOption(value);
    onChange(value);
  };

  return (
    <div
      className={`option ${selectedOption === value ? 'selected' : ''}`}
      onClick={handleClick}
    >
      {children}
    </div>
  );
};

Select.Option = Option;

// 사용 예
<Select onChange={(value) => console.log(value)}>
  <Select.Option value="option1">옵션 1</Select.Option>
  <Select.Option value="option2">옵션 2</Select.Option>
  <Select.Option value="option3">옵션 3</Select.Option>
</Select>

 

Compound component 패턴은 React에서 유연하고 사용자 정의 가능한 컴포넌트를 만드는 강력한 기술입니다.

이 패턴을 사용하면 복잡한 컴포넌트에 대해 더 직관적인 API를 만들고, 코드 구성을 개선하며, 재사용성을 향상할 수 있습니다.

예제에서 보인 것처럼, 이 패턴은 React에서 쉽게 구현하고 사용할 수 있으며, 정교한 UI 컴포넌트를 구축하는 깔끔하고 선언적인 방법을 제공합니다.