React에서 render prop 패턴으로 상태를 유연하게 전달하는 방법

복잡한 UI를 구성하다 보면, 부모 컴포넌트에서 관리하는 상태를 자식에게 전달할 때 단순히 props로 넘기는 것만으로는 부족한 경우가 많다. 이런 상황에서 유용하게 사용할 수 있는 방법이 바로 render prop 패턴이다.

 

render prop 패턴이란?

render prop 패턴은 자식 컴포넌트를 JSX가 아닌 함수로 넘겨서, 부모 컴포넌트의 상태나 메서드를 자식에게 전달하는 방식이다.

<Component>
  {(props) => <Child {...props} />}
</Component>

이렇게 함수형 children을 사용하면 자식 컴포넌트가 부모의 상태나 메서드에 직접 접근할 수 있어, 상태와 UI를 분리된 형태로 설계할 수 있다.

 

---

기본 구조 예시

다음은 selectedItems라는 상태를 render prop 패턴으로 전달하는 예시다.

 

✅ Layout 컴포넌트 (상태를 가진 부모)

type LayoutProps = {
  children: (props: {
    selectedItems: number[];
    onChangeSelectedItems: (ids: number[]) => void;
  }) => React.ReactNode;
};

const Layout = ({ children }: LayoutProps) => {
  const [selectedItems, setSelectedItems] = useState<number[]>([]);

  const handleChange = (ids: number[]) => {
    setSelectedItems(ids);
  };

  return (
    <div className="container">
      {children({
        selectedItems,
        onChangeSelectedItems: handleChange,
      })}
    </div>
  );
};

 

 

• selectedItems는 내부에서 관리되는 상태
• 이 상태와 조작 함수 onChangeSelectedItems를 자식에게 전달

---

 

✅ 사용 예시 (상태를 받는 자식)

const Page = () => {
  return (
    <Layout>
      {({ selectedItems, onChangeSelectedItems }) => (
        <>
          <Header />
          <ItemList
            selectedItems={selectedItems}
            onSelectItems={onChangeSelectedItems}
          />
        </>
      )}
    </Layout>
  );
};

• 부모 컴포넌트의 상태를 render prop으로 받아서 사용
• 자식은 상태를 직접 관리하지 않고, UI만 구성

---

왜 render prop 패턴을 사용할까?

 

상황	render prop 패턴의 장점
자식에게 상태를 유연하게 전달해야 할 때	함수형으로 원하는 형태로 props 구성 가능
상태를 캡슐화하면서도 외부에서 접근 가능하게 하고 싶을 때	로직은 내부에 숨기고 인터페이스만 제공
하나의 Layout 컴포넌트를 다양한 방식으로 재사용하고 싶을 때	다양한 UI 구성이 가능해짐
테스트 가능한 컴포넌트 구조를 만들고 싶을 때	상태 분리로 단위 테스트가 쉬워짐