React에서 확장 가능한 애플리케이션을 구축하려면 견고한 비즈니스 로직 그 이상이 필요합니다. 구성 요소의 아키텍처는 애플리케이션이 성장함에 따라 유지 관리 가능성, 성능 및 유연성이 얼마나 향상되는지에 중요한 역할을 합니다. 많은 웹 애플리케이션의 기본 작업 중 하나는 데이터 목록을 처리하는 것입니다. 제품 목록, 테이블 또는 대시보드를 렌더링하는 경우 반복 및 재사용 가능한 목록 구조가 필요한 시나리오에 자주 직면하게 됩니다.

재사용 가능한 목록 구성 요소를 구축하면 코드베이스의 복잡성을 크게 줄이는 동시에 유지 관리성과 확장성을 향상할 수 있습니다. 이 블로그 게시물에서는 React에서 재사용 가능한 목록 구성 요소를 구축하는 방법, 애플리케이션 확장에 중요한 이유를 살펴보고 프로세스를 안내하는 데 도움이 되는 광범위한 코드 예제를 제공합니다.

React 앱 확장에 재사용성이 중요한 이유

React 앱을 확장할 때는 재사용성이 핵심입니다. 앱 전체에서 다양한 목록 구성 요소를 처리하기 위해 코드를 복제하는 대신 재사용 가능한 목록 구성 요소를 구축하면 공통 논리 및 UI 구조를 독립 실행형 구성 요소로 추상화할 수 있습니다. 이를 통해 React 구성 요소가 모듈식으로 성장할 수 있으며 앱이 확장됨에 따라 잠재적인 버그 및 유지 관리 문제로 이어질 수 있는 코드 중복을 방지할 수 있습니다.

재사용 가능한 구성 요소를 생성하면 다양한 소품을 전달하여 목록 렌더링을 제어할 수 있으므로 모든 사용 사례에 대해 동일한 논리를 다시 작성하지 않고도 애플리케이션을 더욱 동적이고 유연하게 만들 수 있습니다. 이 접근 방식은 앱의 확장성을 높여줄 뿐만 아니라 코드 가독성과 유지 관리성을 단순화하여 개발자 경험을 향상시킵니다.

재사용 가능한 목록 구성 요소의 핵심 개념

확장 가능하고 재사용 가능한 목록 구성 요소를 구축하려면 몇 가지 React 개념을 이해해야 합니다.

Props 및 State: 이를 통해 각각 구성 요소에 데이터를 전달하고 구성 요소의 내부 동작을 제어할 수 있습니다.

배열 메서드: .map(), .filter() 및 .reduce()와 같은 메서드는 React 구성 요소에서 배열을 변환하는 데 필수적입니다.

상속보다 구성: React에서는 상속보다 구성 패턴이 선호됩니다. 더 작고 재사용 가능한 구성 요소를 결합하여 복잡한 UI를 구축할 수 있습니다.

Prop 기반 UI: 재사용 가능한 목록 구성 요소는 Prop에 의해 구동되어야 합니다. 이를 통해 상위 구성 요소의 다양한 데이터, 렌더링 논리 및 스타일까지 전달할 수 있습니다.

예제 1: 간단한 재사용 가능 목록 구성 요소

항목 배열을 소품으로 받아들이고 동적으로 렌더링할 수 있는 간단하고 재사용 가능한 목록 구성 요소를 만드는 것부터 시작해 보겠습니다.

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

이 예에서 SimpleList는 배열인 items 소품을 허용합니다. .map() 함수를 사용하여 배열을 반복하고 순서가 지정되지 않은 목록(

). 각 항목은
• 요소로 래핑됩니다. key prop은 목록이 변경될 때 React가 DOM을 효율적으로 업데이트할 수 있도록 보장합니다.

  사용 예:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

  이 예는 과일의 기본 목록을 렌더링합니다. 구성 요소는 모든 데이터 배열을 전달할 수 있을 만큼 유연합니다.

  목록 구성 요소의 재사용성 향상

  위의 예는 기능적이지만 매우 제한적입니다. 실제 애플리케이션에서는 목록 항목을 조건부로 렌더링하거나, 사용자 정의 스타일을 적용하거나, 개별 항목에 이벤트 리스너를 추가하는 등 더 복잡한 요구 사항을 처리해야 하는 경우가 많습니다.

  render prop을 통해 사용자 정의 렌더링 로직을 허용하여 SimpleList의 재사용성을 더욱 높여보겠습니다.

  예 2: 사용자 정의 목록 렌더링을 위한 렌더 속성 사용

  Render props는 컴포넌트 내부에서 렌더링되는 내용을 제어할 수 있는 React의 패턴입니다. 이 패턴을 사용하여 목록 항목의 사용자 정의 렌더링을 허용하는 방법은 다음과 같습니다.
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  이 경우 ReusableList 구성 요소는 항목을 가져와 JSX를 반환하는 함수인 renderItem prop을 허용합니다. 이는 각 목록 항목이 렌더링되는 방식을 제어하는 ​​유연한 방법을 제공합니다.

  사용 예:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  이 예에서 renderItem 소품을 사용하면 각 사용자가 표시되는 방식을 사용자 지정할 수 있습니다. 이제 모든 데이터 구조에 대해 동일한 목록 구성 요소를 재사용하여 특정 사용 사례에 따라 렌더링할 수 있습니다.

  예 3: 고차 구성 요소로 목록 구성 요소를 확장 가능하게 만들기

  React의 또 다른 강력한 패턴은 HOC(Higher-Order Component)입니다. HOC는 구성 요소를 가져와서 추가 기능이 포함된 새 구성 요소를 반환하는 함수입니다.

  예를 들어, 데이터 가져오기나 조건부 렌더링과 같은 추가 동작으로 ReusableList를 강화하려는 경우 HOC를 사용할 수 있습니다.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  여기서 withLoading HOC는 모든 구성 요소에 로딩 동작을 추가합니다. ReusableList에 적용해 보겠습니다:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  이 예시에서 withLoading HOC는 ReusableList를 래핑하여 로딩 상태 관리를 추가합니다. 이 패턴은 원래 구성 요소를 수정하지 않고 추가 논리로 구성 요소를 강화하여 코드 재사용을 촉진합니다.

  예 4: 후크가 있는 고급 목록 구성 요소

  React 후크를 사용하면 상태 저장 논리를 구성 요소에 직접 통합하여 재사용 가능한 목록 구성 요소를 다른 수준으로 끌어올릴 수 있습니다. 페이지 매김을 처리할 수 있는 재사용 가능한 목록을 만들어 보겠습니다.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  usePagination 후크는 페이지 매김 논리를 캡슐화합니다. 이제 목록 구성 요소 내에서 이 후크를 사용할 수 있습니다.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  사용 예:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

  이 예는 사용자가 항목 페이지를 탐색할 수 있는 페이지가 매겨진 목록을 보여줍니다. 후크는 모든 페이지 매기기 논리를 처리합니다.

  다양한 구성 요소에서 재사용이 가능합니다.

  결론

  React에서 재사용 가능한 목록 구성 요소를 구축하는 것은 확장 가능한 애플리케이션을 만들기 위한 기본적인 방법입니다. 렌더 소품, 고차 구성 요소 및 후크와 같은 패턴을 사용하여 공통 논리를 추상화함으로써 다양한 사용 사례에 적응하는 유연하고 확장 가능하며 유지 관리가 가능한 목록 구성 요소를 만들 수 있습니다.

  React 애플리케이션이 성장함에 따라 재사용 가능한 구성요소를 채택하면 코드베이스가 단순화될 뿐만 아니라 성능이 향상되고 중복이 줄어들며 새로운 기능에 대한 신속한 반복이 가능해집니다. 간단한 목록을 처리하든 더 복잡한 UI 요구 사항을 처리하든 재사용 가능한 구성 요소를 만드는 데 시간을 투자하면 장기적으로 성과를 거둘 수 있습니다.

  참고자료

  React 공식 문서
  
  React 렌더 소품
  
  고차 구성요소 반응
  
  반응 후크