유틸리티 컴포넌트 : Map & Show

나는 다른 라이브러리나 프레임워크의 공식 문서를 보면서 좋은 코드에 대한 아이디어를 얻는 편이다. 그리고 어제는 SolidJS를 살펴보다가 굉장히 재미있는 아이디어 하나를 캐치할 수 있었다.

기존에 나는 특정 조건에 따라 컴포넌트를 다르게 처리함에 있어 아래와 같은 방식으로 코드를 작성했다. 아주 일반적인 방법이지만 컴포넌트와 JS 로직이 뒤섞여서 전체적인 코드의 통일감을 해친다는 인상을 받았다.

export default function Comp() {
  const [count, setCount] = useState(0)
  const list = [1, 2, 3, 4, 5]
 
  return (
    <>
      <div>{count > 5 ? "숫자가 5보다 커요" : "숫자가 5와 같거나 작아요"}</div>
    
      <div>{count > 5 && list.map((item) => <p>{item}</p>)}</div>
    </>
  )
}

그런데 SolidJS에서는 이런 로직을 Map이나 Show 등의 컴포넌트로 만들어서 처리하는 게 아닌가! 이런 유틸리티 컴포넌트 덕분에 조건부 로직을 외부로 내놓지 않으면서도 아주 깔끔하게 조건에 따른 컴포넌트를 핸들링할 수 있었다.

그 파급력에 비해 컴포넌트 자체는 ─ 외부에 코드가 공개되어있는지는 모르겠지만 ─ 간단하게 구현할 수 있는 수준이었다. 아래는 내가 직접 작성한 Map 컴포넌트와 Show 컴포넌트이다.

function Map<T>({ each, children, fallback = "" }: { each: T[]; children: (item: T, index: number) => ReactNode, fallback?: ReactNode }) {
  return <>{each.length !== 0 ? each.map(children) : fallback}</>;
}
 
function Show({ when, children, fallback = "" }: { when: boolean; children: ReactNode; fallback?: ReactNode }) {
  return <>{when ? children : fallback}</>;
}

위에서 작성했던 예시를 유틸리티 컴포넌트를 사용해 다시 작성해보았다. 누군가는 삼항 연산자를 그대로 내놓는 것이 더 깔끔해보인다고 생각할 수도 있지만, 나는 이렇게 유틸리티 컴포넌트로 규격화하여 감싸놓은 편이 좋다. 이것은 옳고 그름의 문제라기보다는 그저 취향의 차이일 뿐이다.

export default function Comp() {
  const [count, setCount] = useState(0)
  const list = [1, 2, 3, 4, 5]
 
  return (
    <>
      <Show when={count > 5} fallback={"숫자가 5와 같거나 작아요"}>
        숫자가 5보다 커요
      </Show>
      
      <Show when={count > 5}>
        <Map each={list}>
          {(item) => <p key={item}>{item}</p>}
        </Map>
      </Show>
    </>
  )
}

SolidJS에는 Show와 Map 말고도 Switch나 Match 등의 다른 유틸리티 컴포넌트도 존재한다. Show와 Map의 활용성이 가장 좋아보이기는 하지만 다른 유틸리티 컴포넌트도 상황에 따라서는 고려해볼만하지 않을까?