React 개발자로서 우리는 모두 데이터 목록을 렌더링해야 하는 시나리오에 직면했습니다. .map() 메서드는 잘 작동하지만 목록을 렌더링할 때마다 동일한 논리를 반복하면 지치게 되고 코드 중복이 발생할 수 있습니다. 다행히도 재사용 가능한 구성 요소, 고차 구성 요소 또는 사용자 정의 후크를 사용하여 이를 처리할 수 있는 더 깨끗하고 확장 가능한 방법이 있습니다.

이 글에서는 React의 목록 렌더링을 개선하여 코드를 DRY 상태로 유지하고 재사용 가능하며 유지 관리하기 쉽게 만드는 접근 방식을 공유하겠습니다.

주요 문제: 반복적인 .map() 로직

전자상거래 애플리케이션용 대시보드를 구축한다고 가정해 보세요. 대시보드에는 최근 주문, 최고 판매 제품, 사용자 댓글 등 여러 목록이 포함되어 있습니다. .map() 함수를 사용하여 각 목록을 렌더링해야 합니다. 다음은 일반적인 예입니다.

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

이제 모든 목록에 대해 .map() 로직을 반복하여 유사한 코드로 구성 요소를 복잡하게 만드는 것을 볼 수 있습니다. 재사용 가능한 패턴이 유용할 수 있는 부분은 다음과 같습니다.

해결책: 재사용 가능한 ListComponent

.map() 로직의 중복을 방지하기 위해 매핑 로직을 추상화하고 데이터를 기반으로 다양한 구성요소를 렌더링할 수 있게 해주는 재사용 가능한 ListComponent를 생성할 수 있습니다.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

용법:

 (
    
  )} 
/>

이 패턴에서는:
renderItem: 각 항목을 렌더링하는 방법을 정의하는 함수

다른 renderItem 함수를 전달하면 모든 목록에 대해 ListComponent를 재사용할 수 있습니다. 그 결과 깨끗하고 재사용 가능한 구성 요소가 생성되어 반복적인 .map() 논리가 줄어듭니다.

더 많은 유연성: 고차 구성 요소(HOC)

여러 구성 요소에 목록 렌더링이 필요한 경우 HigherOrder 구성 요소를 생성하여 이 패턴을 더 발전시켜 보겠습니다. HOC를 사용하면 추가 기능(이 경우 목록 렌더링)으로 모든 구성 요소를 향상할 수 있습니다.

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

용법:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

OrderComponent를 withListRendering HOC로 래핑함으로써 원래 구성 요소를 수정하지 않고도 목록 렌더링 동작을 자동으로 추가했습니다. 이 패턴은 코드를 모듈식으로 유지합니다.

훅 애호가를 위한: 목록 렌더링을 위한 맞춤형 후크

React 후크는 로직을 캡슐화하는 기능적인 방법을 제공합니다. 후크 사용을 선호하는 경우 사용자 정의 후크를 사용한 목록 렌더링의 예는 다음과 같습니다.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

용법:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

이 접근 방식은 .map() 논리를 후크로 이동하고 렌더링 논리를 구성 요소 구조와 별도로 유지합니다. 이는 구성 요소를 간결하게 유지하고 프레젠테이션에 집중하는 또 다른 방법입니다.

실제 시나리오: 전자상거래 대시보드

이 패턴을 실제 시나리오에 적용해 보겠습니다. 여러 주문, 제품, 리뷰 등의 목록을 렌더링해야 하는 전자상거래 관리 대시보드를 구축한다고 상상해 보세요.

ListComponent 접근 방식을 사용하면 다음과 같은 주문 목록을 렌더링할 수 있습니다.

 (
    
  )} 
/>

제품과 같은 다른 목록을 렌더링해야 하는 경우 동일한 ListComponent를 다른 renderItem 함수와 함께 재사용할 수 있습니다.

 (
    
  )} 
/>

.map() 로직을 다시 작성할 필요가 없습니다. 다른 데이터 및 구성 요소와 함께 ListComponent를 재사용하기만 하면 됩니다. 이렇게 하면 코드베이스가 커짐에 따라 유지 관리가 더 쉬워집니다.

결론: 깨끗하고 재사용 가능하며 확장 가능한 코드

재사용 가능한 ListComponent 패턴은 반복적인 .map() 로직을 추상화하여 React 목록 렌더링을 단순화합니다. 기본 구성 요소 접근 방식, HOC 또는 사용자 정의 후크 중 무엇을 선호하든 이 패턴을 사용하면 코드가 깔끔하고 재사용 가능합니다.

여러 목록이 있는 React 구성 요소를 구축할 때 이러한 패턴 중 하나를 사용하여 외부 목록 논리를 분리하는 동시에 구성 요소가 프레젠테이션에 집중하도록 하는 것을 고려해 보세요.

React에서 어떤 재사용 가능한 패턴이 유용하다고 생각하시나요? 댓글로 알려주세요! 마침내 읽어주셔서 감사합니다.