🛠 Render Props 패턴

개념

• props로 함수를 전달해서
• 그 함수가 컴포넌트 안에서 호출되고,
• 동적으로 어떤 것을 렌더링 할지 결정하는 패턴

📦 컴포넌트 안에서 렌더링 책임을 외부(부모)로 넘기는 기법

---

왜 사용할까?

• 로직과 UI를 분리할 수 있다.
• 상태를 공유하면서, UI는 사용자 마은대로 렌더링 하게 해준다.
• 코드의 재사용성이 높아진다.

-> 즉, 로직은 이 컴포넌트가 관리하고, UI는 다른 녀석이 알아서 하는 패턴

---

예시

➡️ 마우스 위치를 추적하는 컴포넌트

// MouseTracker.js
import { useState } from "react";

function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  };

  return (
    <div style={{ height: "100vh" }} onMouseMove={handleMouseMove}>
      {children(position)} {/* <- Render Props */}
    </div>
  );
}

export default MouseTracker;

➡️ 사용하는 쪽에서는 이렇게 쓴다

<MouseTracker>
  {({ x, y }) => (
    <h1>Mouse position: {x}, {y}</h1>
  )}
</MouseTracker>

설명:

• MouseTracker는 마우스 위치 추적만 함.
• children으로 전달한 함수가 그 위치를 받아서 원하는 UI를 그려준다.

---

구조 그림

[MouseTracker]
 └─ useState (마우스 위치 저장)
 └─ onMouseMove 이벤트 핸들링
 └─ {children(position)} 호출  →  외부에서 결정하는 렌더링

---

Render Props vs 일반 Props

비교 항목	일반 Props	Render Props
데이터 전달 방법	값(value) 또는 JSX 컴포넌트	함수(function) 전달
렌더링 주체	컴포넌트 내부에서 정의	외부 함수(children)이 정의
유연성	고정된 형태	매우 유연 (UI 자유롭게 조립 가능)

---

주의할 점

• 함수가 계속 생성되면 성능 이슈(re-render 문제)가 생길 수 있다.
  - 요즘은 최적화를 위해 useCallback 같은 걸 잘 서야 함.
• 요즘은 Render Props보다는,
  -Hooks(useXXXX)로 로직을 따로 분리하는 방법을 더 많이 쓴다.