React Compound Pattern - 코드 사용자를 배려하는 패턴

목적: React Compound Pattern로 개선한 점과 느낀 점을 남긴다.

 

위와 같은 컴포넌트를 구현하기 위해 Select와 TextField를 감싸는 Container를 구현하고 children으로 내부에 포함하고자 하는 

아이템들(Select, TextField, DatePicker 등)을 받을 수 있는 컴포넌트를 만들었습니다.

const Search = () => {
  return (
    <SearchContainer>
      <AutocompleteQueryBox
        label="상태"
        options={statusSelectModel}
        queryCode="status"
      />
      <SearchKeyword />
    </SearchContainer>
  );
};

export default Search;

 

예를 들어 위와 같이 사용하게 됩니다. AutocompleteQueryBox와 SearchKeyword라는 컴포넌트는

SearchContainer안에서 Context를 받아서 완벽히 작동하도록 공들여 만든 컴포넌트입니다.

 

문제가 발생했습니다.

다른 개발자 분과 협업을 하는데 SearchContainer 안에서 비슷한 기능을 하는 엉뚱한 컴포넌트를 새로 작성하셨습니다.

고민이 되었습니다. SearchContainer 안에서 AutocompleteQueryBox 와 SearchKeyword를 사용하면 된다는 걸 어떻게 알리지..?

이를 해결하기 위해 headlessui라는 라이브러리를 사용할때 받았던 좋은 경험을 떠올렸습니다.

 

<Combobox>를 사용할 때 <Combobox.Input>이 combobox내부에서 사용할 수 있는 input임을 직관적으로 알 수 있었어요.

그리고 이렇게 작성하는 패턴이 compound 패턴입니다.

구글링을 해서 Compound 패턴에 대해 검색해보면 재사용성, 유연성, 단순화 등 여러 장점들이 있다고 나오지만

그중에서 제가 생각하는 compound 패턴의 가장 큰 장점은 '컴포넌트 간의 명확한 관계 설정'인 것 같습니다.

재사용 가능한 컴포넌트 혹은 라이브러리 제공자 입장에서 

사용자가 내 의도대로 '알아서' 잘 사용해주길 바라지 않고,

자연스럽게 제작자의 의도대로 사용할 수 있도록 배려하는 방법처럼 느껴집니다.

SearchContainer 내부를 수정해보겠습니다.

const compoundContext = createContext(...);

const SearchContainer = () => {
  return (
    <compoundContext.Provider value={...}>
      <div>{children}</div>
    </compoundContext.Provider>
  );
};
SearchContainer.Keyword = SearchKeyword;
SearchContainer.SelectBox = AutocompleteQueryBox;

export default SearchContainer;

 

AutocompleteQueryBox라는 네이밍이 계속 마음에 걸렸습니다. 저렇게 지었던 이유가 있지만..

사용하려고 보니 관계를 떠올리기가 너무 힘드네요. SelectBox라는 이름으로 compound 했습니다.

이제 AutocompleteQueryBox는 SearchContainer.SelectBox로 쓸 수 있고, 

SearchKeyword는 SearchContainer.Keyword로 쓸 수 있습니다.

const Search = () => {
  return (
    <SearchContainer>
      <SearchContainer.SelectBox
        label="상태"
        options={statusSelectModel}
        queryCode="status"
      />
      <SearchContainer.Keyword />
    </SearchContainer>
  );
};

export default Search;

이제 위 코드만 봐도 컴포넌트 간에 관계설정이 되어있음을 한눈에 파악할 수 있습니다.

게다가 자연스럽게 자동완성도 되니 사용하기가 더 편해졌습니다.

 

Compound패턴이 이런 점 때문에 좋다고 해서 모든 걸 이렇게 할 필요는 없겠죠. 

하지만 협업을 할 때 다른 개발자(사용자)를 생각한다면 Compound 패턴이 필요한 경우가 종종 있을 것 같습니다.