React 컴포넌트 부모 요소 간단하게 바꿔 넣는 방법

이미지 출처: Lautaro Andreani on Unsplash

React 컴포넌트를 만들다 보면 간혹 자식 요소는 그대로 쓰고 싶은데 부모 요소를 바꿔 넣고 싶을 때가 있습니다.

예를 들어 파라미터에 따라 컴포넌트를 Link로 감싸야 할지 Button으로 감싸야 할지 정해지는 경우가 그런 때입니다. 다음 Pseudo 코드를 봅시다.

export function MyListItem({ href, onClick }) {
  return <Link if href, button if onClick>
    ...many child components
  </Link if href, button if onClick>
}

보통 이런 경우는 다음과 같이 자식 코드를 컴포넌트로 만들어주곤 합니다.

export function MyListItem({ href, onClick }) {
  if (href) {
    return <Link href={href}><MyContent></Link>
  }

  return <button onClick={onClick}><MyContent></Link>
}

export function MyContent() {
  return <>
    ...many child components
  </>
}

그렇지만 이럴 경우 컴포넌트를 새로 만들어야 하는 번거로움이 생기고 추가적인 Prop drilling이 필요하게 됩니다. 그렇다고 컴포넌트 안에 컴포넌트를 만들자니 가독성이 떨어집니다.

이런 경우에 삼항 연산자를 사용하면 간결하게 코드를 작성할 수 있습니

export function MyListItem({ href, onClick }) {
  const Wrapper = href ? Link : "button"

  return <Wrapper href={href} onClick={onClick} className="wrapper">
    ...many child components
  </Wrapper>
}