Render Props Pattern (with React)

목차

• render props pattern 이란?
• 왜 사용할까?
• 구현해보자!
• 비교해보자!

render props pattern 이란?

이 패턴은 props로 다른 components를 랜터링하는 패턴입니다. 간단한 예제를 한번 볼까요?

import { useState } from 'react'

const Title = ({ render }) => render();
const Title2 = ({ children }) => {
  const [name, setName] = useState('Eddie');
  return children(name);
}

function App() {
  return (
    <div className="App">
      <Title render={() => <h1>Hello Title!</h1>} />
      <Title2>{(name) => <h1>Hello {name}</h1> }</Title2>
    </div>
  );
}

이렇게 사용 하면 이제 Hello Title1이 h1으로 랜더링이 됩니다.

왜 사용할까?

이 패턴을 사용하는 이유는 state를 끌어올리고 한곳에서 관리를 하기 위함입니다. 만약 아래와 같이 구현을 해야한다면 어떻게 할까요?

보통 이렇게 코드를 구현하실거 같아요.

function Input({ value, handleChange }) {
  return <input value={value} onChange={e => handleChange(e.target.value)} />;
}

export default function App() {
  const [value, setValue] = useState("");

  return (
    <div className="App">
      <h1>☃️ Temperature Converter 🌞</h1>
      <Input value={value} handleChange={setValue} />
      <Kelvin value={value} />
      <Fahrenheit value={value} />
    </div>
  );
}

만약 위에서 계속 다른 구현물들이 추가 되면 어떻게 될까요? 아마 App의 모습은 이렇게 될거 같아요.

export default function App() {
  const [value, setValue] = useState("");
  const [todos, setTodos] = useState([]);
   // ...

  return (
    <div className="App">
      <h1>☃️ Temperature Converter 🌞</h1>
      <Input value={value} handleChange={setValue} />
      <Kelvin value={value} />
      <Fahrenheit value={value} />
      <h1>Hello Todos</h1>
      <input />
      <Todos />
      // ...
    </div>
  );
}

🚨 문제점

• 이제 관리를 해야할 state가 늘어나면 날수록 App은 지져분해 질거 같아요.
• 만약 다른 상황에서는 다른 Component까지 랜더링을 시켜야한다면 아마 복붙의 연속이 될거 같아요.

한번 리팩토링을 해볼까요?

구현해보자!

import TemperatureConverter from "./components/TemperatureConverter";

const Fahrenheit = ({ value }) => {
  const fahrenheitValue = useMemo(() => {
    return (parseInt(value || 0, 10) * 9) / 5 + 32;
  }, [value]);
  return <div className="temp">{fahrenheitValue}°F</div>;
}

const Kelvin = ({ value }) => {
  const kelvinValue = useMemo(() => {
    return parseInt(value || 0, 10) + 273.15;
  }, [value]);

  return <div className="temp">{kelvinValue}K</div>;
}

function App() {
  return (
    <div className="App">
      <TemperatureConverter
        render={(value) => (
          <>
            <Fahrenheit value={value} />
            <Kelvin value={value} />
          </>
        )}
      />
    </div>
  );
}

이렇게 하면 어떻게 될까요? value 값은 TemperatureConverter에서 관리하게 되고 Component들도 자유롭게 교체를 할 수 있게 됩니다. 그럼 위의 문제점 두가지가 한번에 해결이 될거 같아요.