[React] Render Prop Pattern

개념

컴포넌트가 렌더링 함수를 프로퍼티로 전달받아 사용하는 방법

 

특징

동일한 렌더링 방식이 연속적으로 사용되는 컴포넌트에서 아주 유용 (리스트, 테이블 형태)

복잡한 조건의 렌더링 방식을 표현하기에 제한

render 함수가 너무 복잡해지거나 render기능을 하는 프로퍼티가 많아질 수 있음

 

 

See the Pen Render Props Pattern by Daewoong Kim (@daewoong-kim) on CodePen.

 

 

상태를 부모 컴포넌트로 옮겼을 때 Render Props Pattern을 고민해보자

상태변경은 모든 자식 컴포넌트의 리렌더링을 유발하고, 이런 상황이 쌓이면 앱의 전체적인 성능을 떨어트릴 수 있다.

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>
  )

 

 

See the Pen React 18 Template by Daewoong Kim (@daewoong-kim) on CodePen.

 

 

단점

render props로 해결하려 한 문제는 보통 hook으로 대체 가능하다. 

render prop내에서는 생명 주기 함수를 사용할 수 없기에, 받은 데이터를 수정할 필요가 없는 컴퍼넌트들에 대해서만 사용할 수 있다. (이부분은 카카오엔터 페이지에서 자세히 설명하고 있다. 함수로 호출했기 때문인데, 컴포넌트로 호출해야한다. React profile에서 확인 가능) 

 

https://fe-developers.kakaoent.com/2022/221110-ioc-pattern/

이제부터 이 컴포넌트는 제 겁니다 | 카카오엔터테인먼트 FE 기술블로그

 

 

https://patterns-dev-kr.github.io/design-patterns/render-props-pattern/

Render Props 패턴