React에서 작업할 때 데이터를 받아들이고 각 항목을 매핑하여 표시하는 목록 구성 요소를 갖는 것이 일반적입니다. 그러나 애플리케이션의 다른 부분에서는 동일한 데이터에 대해 다른 렌더링이 필요할 수 있습니다. 이에 대한 가장 좋은 해결책은 render prop을 사용하여 사용자 정의 렌더링 기능을 전달하여 목록 구성 요소를 보다 유연하게 만드는 것입니다.

이것이 왜 필요한가?

애플리케이션에 사용자 목록이 있다고 상상해 보세요. 일부 영역에서는 사용자 이름만 표시하고 다른 영역에서는 이메일 주소나 프로필 사진과 같은 더 자세한 정보를 표시해야 합니다. 각 사용 사례에 대해 여러 목록 구성 요소를 만들면 코드가 중복되어 프로젝트를 유지 관리하기가 더 어려워질 수 있습니다.

해결책은 무엇입니까?

간단하고 우아한 해결책은 목록 구성 요소가 renderItem 기능을 허용하도록 하는 것입니다. 이 함수는 개별 항목(이 경우 사용자)을 인수로 사용하고 원하는 방식으로 렌더링할 수 있는 React 노드를 반환합니다.

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    

{data.map((item) => (
• {renderItem(item)}
))}

이 구성요소를 어떻게 사용하나요?

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
];

const UserList = () => {
  return (
     {user.name}}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
     (
        

          {user.name}
          
{user.email}
        
      )}
    />
  );
};

이것이 왜 훌륭한 패턴인가?

이 패턴은 코드 중복을 최소화하면서 유연성을 극대화합니다. 모든 사용 사례에 대해 서로 다른 목록 구성 요소를 만드는 대신 모든 렌더링 요구 사항을 처리할 수 있는 하나의 목록 구성 요소가 있습니다.

React Native로 작업했다면 이 패턴은 FlatList와 같은 목록 구성 요소에 사용되므로 익숙하게 느껴질 것입니다. 목록 렌더링을 위한 검증되고 안정적인 솔루션입니다.

목록 구성 요소가 renderItem 소품을 허용하도록 허용하면 애플리케이션의 다양한 부분에 적용되는 재사용 가능한 구성 요소를 쉽게 만들 수 있습니다. 이 접근 방식은 코드베이스를 단순화하고 유지 관리를 더 쉽게 하며 애플리케이션의 확장성을 향상시킵니다.

이제 이 패턴을 배웠으니 React 프로젝트에서 시도해 보세요. 그러면 이 패턴이 얼마나 강력하고 유연한지 알게 될 것입니다! 즐겁게 코딩하셨나요?