[React] Render Props: 컴포넌트 재사용성을 한 단계 업그레이드하기 🎨

React Render Props: 컴포넌트 재사용성을 한 단계 업그레이드하기 🎨

 

React에서 Render Props는 컴포넌트 간의 로직 재사용성을 극대화할 수 있는 디자인 패턴입니다. 고차 컴포넌트(Higher-Order Components, HOC)와 비슷한 문제를 해결하지만, 더 유연하고 명확한 방식으로 구현됩니다. 이 글에서는 Render Props의 개념, 사용 방법, 그리고 실전 예제를 통해 Render Props를 완벽히 이해할 수 있도록 도와드릴게요. 🌟

 

Render Props란? 🧐

 

Render Props는 컴포넌트가 prop으로 함수를 전달받아 그 함수를 통해 컴포넌트의 UI를 동적으로 결정하는 React 패턴입니다.

 

주요 특징

• Render Props는 로직과 UI를 분리하여 재사용성을 높입니다.

• 함수를 통해 UI를 동적으로 렌더링합니다.

• “Render Props”라는 이름은 단순히 컨벤션일 뿐, prop의 이름은 자유롭게 설정 가능합니다.

 

Render Props의 기본 구조 🏗️

 

Render Props의 기본적인 형태는 다음과 같습니다:

 

function RenderPropsComponent({ render }) {

  const data = "Hello, Render Props!";

  return <div>{render(data)}</div>;

}

 

function App() {

  return (

    <RenderPropsComponent

      render={(data) => <h1>{data}</h1>}

    />

  );

}

 

작동 방식

1. RenderPropsComponent는 prop으로 render라는 함수를 받습니다.

2. 이 render 함수는 데이터를 기반으로 동적으로 UI를 결정합니다.

3. App 컴포넌트에서 render prop에 전달한 함수가 실행되면서 UI를 렌더링합니다.

 

Render Props가 해결하는 문제 🛠️

 

React 앱에서 공통된 로직(예: API 호출, 상태 관리)을 여러 컴포넌트에서 재사용하려면 다음과 같은 패턴을 사용할 수 있습니다:

1. 고차 컴포넌트(HOC): 재사용성을 제공하지만, 컴포넌트 트리를 복잡하게 만들고 디버깅을 어렵게 합니다.

2. 컴포넌트 상속: React에서 권장되지 않으며, 단방향 데이터 흐름과 맞지 않습니다.

 

Render Props는 이런 문제를 해결하면서 로직을 명확히 분리합니다.

 

실전 예제: Render Props로 마우스 위치 추적하기 🖱️

 

단순 구현

 

마우스 위치를 추적하는 컴포넌트를 Render Props로 만들어 봅시다:

 

function MouseTracker({ render }) {

  const [position, setPosition] = React.useState({ x: 0, y: 0 });

 

  const handleMouseMove = (event) => {

    setPosition({ x: event.clientX, y: event.clientY });

  };

 

  return (

    <div style={{ height: "100vh" }} onMouseMove={handleMouseMove}>

      {render(position)}

    </div>

  );

}

 

function App() {

  return (

    <MouseTracker

      render={({ x, y }) => (

        <h1>

          마우스 위치: X: {x}, Y: {y}

        </h1>

      )}

    />

  );

}

 

작동 원리

1. MouseTracker는 마우스의 X, Y 좌표를 상태로 관리합니다.

2. render prop으로 전달된 함수는 position 상태를 기반으로 동적으로 UI를 생성합니다.

3. App에서 원하는 방식으로 마우스 위치를 표시할 수 있습니다.

 

Render Props의 확장 사례 🚀

 

1️⃣ 데이터 페칭

 

Render Props는 데이터 로딩 로직에도 활용할 수 있습니다:

 

function DataFetcher({ url, render }) {

  const [data, setData] = React.useState(null);

  const [loading, setLoading] = React.useState(true);

 

  React.useEffect(() => {

    fetch(url)

      .then((response) => response.json())

      .then((result) => {

        setData(result);

        setLoading(false);

      });

  }, [url]);

 

  return render({ data, loading });

}

 

function App() {

  return (

    <DataFetcher

      url="https://jsonplaceholder.typicode.com/posts/1"

      render={({ data, loading }) =>

        loading ? <p>로딩 중...</p> : <h1>{data.title}</h1>

      }

    />

  );

}

 

주의점과 한계 ⚠️

 

1. Prop Drilling 문제

• Render Props를 지나치게 사용하면 컴포넌트 계층이 깊어질 수 있습니다.

• Context API나 상태 관리 라이브러리를 병행하면 이 문제를 완화할 수 있습니다.

 

2. 함수 재정의로 인한 성능 저하

• Render Props는 매번 새로운 함수를 생성하므로, 하위 컴포넌트가 불필요하게 렌더링될 수 있습니다.

• 이를 해결하려면 React.memo를 사용하거나 useCallback으로 함수를 메모이제이션하면 됩니다.

 

Render Props vs. Hooks: 현대 React에서는?

 

React Hooks가 등장한 이후, Render Props는 사용 빈도가 줄어들었지만 여전히 유용한 경우가 있습니다:

• 특정 컴포넌트의 재사용성을 높이고 싶을 때.

• 라이브러리나 기존 코드베이스에서 Render Props를 사용하는 경우.

 

Hooks로 같은 로직 구현하기

 

useState와 useEffect를 사용하면 Render Props 없이도 같은 로직을 구현할 수 있습니다.

 

결론: Render Props, 왜 여전히 중요한가? 🏆

• Render Props는 로직과 UI의 분리를 통해 컴포넌트를 더욱 재사용 가능하게 만들어 줍니다.

• 최신 React 앱에서는 Hooks와 함께 사용하는 방식으로 활용도를 극대화할 수 있습니다.

• 단순한 개념이지만, 잘 사용하면 컴포넌트 설계를 유연하게 만들고 코드의 가독성을 높이는 데 도움을 줍니다.

 

🌷전설의 개발자가 되어봅시당!🌷