import * as React from 'react'

type ContainerProps = {
  children: typeof Body
}

type BodyProps = {
  id: string
}

function Container({ children }: ContainerProps) {
  const id = '1234'

  const Child = children

  return <Child id={id} />
}

export function Body({ id }: BodyProps) {
  return <>{id}</>
}

export function Page() {
  return <Container>{Body}</Container>
}

Body 는 컴포넌트라 children({ id }) 로 부르지 않고 JSX 로 렌더한다.¹

컨테이너/프레젠테이션 패턴을 활용한 React 컴포넌트 구조.

• 컨테이너 컴포넌트(Container)는 상태를 관리하고 데이터를 하위 컴포넌트에 전달함.
• 프레젠테이션 컴포넌트(Body)는 데이터를 받아서 UI를 렌더링함.
• 이 구조는 테스트를 쉽게 하고, 컴포넌트의 역할을 명확하게 분리함.

---

Footnotes

1. Components and Hooks must be pure – React: “Components should only be used in JSX. Don’t call them as regular functions.” ↩