[React] Render Props Pattern

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다.

 

1. Render Prop VS Children Prop

Children Prop 사용

Render Prop 사용

 

Redner Prop을 직접 사용해보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까?

 

2. Render Prop과 Children Prop의 값(데이터) 처리

Render Prop의 인자로 값(데이터)을 넘길 수 있다.

 

위 코드를 보면 props.render(value) 처럼 Render Prop의 인자로 value(온도)를 넘겨 Kelvin, Fahrenheit 컴포넌트에서 공통으로 value를 사용하고 있습니다. 만약 Render Prop을 사용하지 않고 Children Prop을 사용했다면 어떨까요?

 

Children Prop 사용 & value state 상위 컴포넌트에서 관리

위 코드를 보면 Children Prop을 사용하기 위해 value state를 상위 컴포넌트에서 관리하는 모습을 볼 수 있습니다.

 

문제점

• value와 setValue의 중복 전달: value와 setValue를 Input과 하위 컴포넌트들에 모두 전달하면서 코드가 중복되고 복잡해집니다.
• 컴포넌트의 역할이 모호해짐: value(온도) state를 App 컴포넌트에서 관리하기 때문에 구조가 더 복잡해지고 App 컴포넌트의 역할이 불필요하게 커집니다.
• 컴포넌트 간의 강한 의존성: App 컴포넌트가 Input의 내부 구현에 의존하게 되어, 추후 Input 컴포넌트의 구조가 바뀌면 App도 수정해야 하는 상황이 생길 수 있습니다.

React.Children.map 함수 사용

cloneElement – React

위 코드를 보면 React.Children.map 함수를 이용해  자식 요소를 랜더링 합니다. 이때 children prop에 전달된 모든 자식 요소를 순회하며 value prop을 추가합니다.

 

문제점

• 성능 저하 가능성: React.Children.map은 자식 요소마다 React.cloneElement를 사용하여 새로운 요소를 반환하는 경우가 많습니다. 자식 요소가 많을 때는 이 작업이 비효율적일 수 있으며, 렌더링 성능에 영향을 줄 수 있습니다.
• 불필요한 리렌더링:  React.Children.map에서 React.cloneElement를 통해 자식 요소들을 재생성하면, 기존의 요소와는 다른 요소로 인식되어 리렌더링이 발생할 수 있습니다.
• 유연성 제한: children이 배열이 아닌 단일 요소인 경우 map이 아닌 단일 요소에 대한 작업을 따로 처리해야 할 때도 있습니다. 이때 React.Children.map은 React 컴포넌트의 children을 순회하는 데에 특화되어 있어, 일반적인 배열 메서드처럼 다양한 변형 작업을 수행하기 어려울 수 있습니다.

3. Render Props Pattern 장점 

 

1. 컴포넌트 재사용성 증가
   • 특정 로직이나 UI를 여러 컴포넌트에서 반복해서 사용해야 할 때, 중복을 줄이고 컴포넌트를 재사용할 수 있는 구조를 제공합니다.
   • Render Props를 통해 부모 컴포넌트에서 다양한 하위 컴포넌트에 원하는 UI를 쉽게 전달할 수 있습니다.
2. 로직 분리와 관심사의 분리
   • Render Props를 사용하면 상태 관리나 비즈니스 로직을 UI에서 분리할 수 있어, 코드의 가독성과 유지보수성이 향상됩니다.
   • 예를 들어, 렌더링 로직과 데이터 로직을 별도로 관리할 수 있어 각 컴포넌트가 수행하는 작업이 명확해집니다.
3. 컴포넌트 유연성 향상
   • Render Props 패턴은 부모 컴포넌트가 하위 컴포넌트의 렌더링 방식을 결정할 수 있게 하여 다양한 UI 구성을 가능하게 합니다. 예를 들어, 부모 컴포넌트에서 전달된 함수에 따라 하위 컴포넌트가 동적으로 다른 UI를 렌더링 하도록 설정할 수 있습니다.
4. 상태 공유와 코드 중복 감소
   
   • Render Props는 동일한 로직이나 상태를 다양한 컴포넌트에 공유하도록 돕기 때문에, 유지보수 중 중복 코드를 줄이고 한 곳에서 로직을 관리할 수 있습니다.
5. 확장성과 유지보수성 향상
   • 확장성이 높은 구조로, 다양한 컴포넌트에서 필요할 때마다 기능을 확장할 수 있습니다. UI 요소가 복잡해지거나 컴포넌트가 많아지더라도, 패턴에 따라 기능을 분리하고 추가하기가 수월해집니다.
   • 예를 들어, 애플리케이션이 커져도 Render Props로 감싸진 컴포넌트는 손쉽게 새 기능을 추가할 수 있으며, 여러 컴포넌트에 걸쳐 로직이 공유되기 때문에 유지보수가 더 쉽습니다.
6. 테스트 용이성 증가
   • 로직이 독립적인 모듈로 분리되기 때문에, 개별 컴포넌트의 테스트가 쉬워집니다. 컴포넌트를 독립적으로 테스트할 수 있어 신뢰성이 높아집니다.
   • 로직을 부모 컴포넌트에 숨기고 UI만을 테스트해야 할 때, UI와 로직이 독립적이므로 단위 테스트를 쉽게 설정할 수 있습니다.

 

참고 사이트

Render Props Pattern

 

 

[TS] 타입 추론과 타입 단언

[React] IntersectionObserver를 통한 스크롤 이벤트