Render Props는 무엇을 그릴지를 컴포넌트가 정하지 않고, prop으로 받은 함수가 정하게 하는 로직 재사용 패턴이다. 컴포넌트는 상태와 동작만 맡고 그 데이터를 함수에 넘긴다.
function MouseTracker({ children }) {
const [pos, setPos] = useState({ x: 0, y: 0 })
return <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>{children(pos)}</div>
}
<MouseTracker>{({ x, y }) => <p>마우스: {x}, {y}</p>}</MouseTracker>render라는 prop 대신children을 함수로 쓰는 형태(function as children)가 흔하다- 장점: 로직과 UI가 분리되고, 같은 로직을 다른 화면에 재사용한다. 고차 컴포넌트(Higher-Order Component, HOC)보다 데이터 흐름이 눈에 보인다
- 리스트 항목 끝에 버튼 영역만 갈아 끼우는
renderActions={item => …}처럼, 컴포넌트를 고치지 않고 확장하는 슬롯으로도 쓴다. 확장에 열려 있고 수정에 닫힌 구조다(React로 보는 SOLID) - 한계: 중첩되면 콜백 지옥처럼 들여쓰기가 깊어진다. 훅이 나온 뒤로는
const pos = useMouse()같은 커스텀 훅이 대부분을 대체했다 - 여전히 라이브러리(폼, 가상화, 헤드리스 UI(Headless UI))에서 쓰이고, 리렌더 범위를 좁히는 데도 도움이 된다(상태 내리기와 컴포지션으로 리렌더 줄이기)
같은 계열의 합성 패턴은 컴파운드 컴포넌트 패턴·Presentational·Container 컴포넌트, 함수를 넘겨 동작을 바꾸는 발상은 전략 패턴.