[UI Component] Design Patterns - Render Props

Render Props

- JSX 엘리먼트를 props를 통해 컴포넌트에게 전달함

- HOC와 같이 컴포넌트를 재사용하는 또 다른 방법

- prop을 받는 컴포넌트가 재사용성이 좋아짐

- render prop 함수를 호출할 때 인자를 전달할 수 있음

- 상태를 부모 컴포넌트로 올리기

  - 규모가 큰 앱에서 컴포넌트가 여러 자식 컴포넌트를 가지고 있는 경우 까다로울 수 있음

  - 상태의 변경은 모든 자식 컴포넌트의 리렌더링 유발 가능

  - 앱의 전체적인 성능이 떨어질 수 있음

- render prop을 넘기는 대신 자식 컴포넌트를 함수로 넘길 수 있음

- 몇몇 상황에서 hooks로 대체될 수 있음

- 장점

  - 몇몇 컴포넌트 간 데이터 공유가 간단함

  - children prop을 활용하는 것으로 해당 컴포넌트 재사용 가능

  - 부모 컴포넌트로부터 받은 prop을 명시적으로 처리하고,
     props를 자동으로 머지하도록 구현하지 않아서 HOC에서 props 출처를 알기 어려웠던 이슈가 없음

  - 렌더링 컴포넌트와 앱의 로직 분리 가능

- 단점

  - 트리가 깊어짐

  - 대부분 hooks로 대체 가능

  - render prop 내에서는 생명 주기 함수 사용 불가

  - 받은 데이터를 수정할 필요가 없는 컴포넌트들에 대하여 사용 가능

 

- 예시

 

function Input(props) {
  const [value, setValue] = useState('')

  return (
    <>
      <input
        type="text"
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Temp in °C"
      />
      {props.render(value)}
    </>
  )
}

export default function App() {
  return (
    <div className="App">
      <h1>☃️ Temperature Converter 🌞</h1>
      <Input
        render={value => (
          <>
            <Kelvin value={value} />
            <Fahrenheit value={value} />
          </>
        )}
      />
    </div>
  )
}

 

- 활용

---

[UI Component] Design Patterns - Render Props