재사용 가능한 목록 구성 요소로 React 앱 확장-JS 튜토리얼-php.cn

Scaling React Apps with Reusable List Components

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 (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default SimpleList;

로그인 후 복사

이 예에서 SimpleList는 배열인 items prop을 허용합니다. .map() 함수를 사용하여 배열을 반복하고 순서가 지정되지 않은 목록 내의 각 항목을 렌더링합니다(

요소로 래핑됩니다. key prop은 목록이 변경될 때 React가 DOM을 효율적으로 업데이트할 수 있도록 보장합니다.
사용 예:
```
import React from 'react';
import SimpleList from './SimpleList';

const App = () => {
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <div>
      <h1>Fruit List</h1>
      <SimpleList items={fruits} />
    </div>
  );
};

export default App;
```
로그인 후 복사
이 예는 과일의 기본 목록을 렌더링합니다. 이 구성 요소는 모든 데이터 배열을 전달할 수 있을 만큼 유연합니다.

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

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

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

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

Render props는 구성 요소 내부에서 렌더링되는 내용을 제어할 수 있는 React의 패턴입니다. 이 패턴을 사용하여 목록 항목의 사용자 정의 렌더링을 허용하는 방법은 다음과 같습니다.
```
const ReusableList = ({ items, renderItem }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
};
```
로그인 후 복사
이 경우 ReusableList 구성 요소는 항목을 가져와 JSX를 반환하는 함수인 renderItem prop을 허용합니다. 이는 각 목록 항목이 렌더링되는 방식을 제어하는 유연한 방법을 제공합니다.

사용 예:
```
const App = () => {
  const users = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
  ];

  return (
    <div>
      <h1>User List</h1>
      <ReusableList
        items={users}
        renderItem={(user) => (
          <div>
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
          </div>
        )}
      />
    </div>
  );
};
```
로그인 후 복사
이 예에서 renderItem prop을 사용하면 각 사용자가 표시되는 방식을 맞춤 설정할 수 있습니다. 이제 모든 데이터 구조에 대해 동일한 목록 구성 요소를 재사용하여 특정 사용 사례에 따라 렌더링할 수 있습니다.

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

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

예를 들어 데이터 가져오기 또는 조건부 렌더링과 같은 추가 동작으로 ReusableList를 강화하려는 경우 HOC를 사용할 수 있습니다.
```
const withLoading = (Component) => {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
};
```
로그인 후 복사
여기서 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 (
    <div>
      <h1>User List</h1>
      <EnhancedList
        isLoading={isLoading}
        items={users}
        renderItem={(user) => (
          <div>
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
          </div>
        )}
      />
    </div>
  );
};
```
로그인 후 복사
In this example, the withLoading HOC wraps around ReusableList, adding loading state management to it. This pattern promotes code reuse by enhancing components with additional logic without modifying the original component.

Example 4: Advanced List Components with Hooks

With React hooks, we can take reusable list components to another level by integrating stateful logic directly into the components. Let’s build a reusable list that can handle pagination.
```
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 };
};
```
로그인 후 복사
The usePagination hook encapsulates pagination logic. We can now use this hook within our list component.
```
const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
  const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
    items,
    itemsPerPage
  );

  return (
    <div>
      <ul>
        {currentItems.map((item, index) => (
          <li key={index}>{renderItem(item)}</li>
        ))}
      </ul>
      <div>
        <button onClick={prevPage} disabled={currentPage === 1}>
          Previous
        </button>
        <button onClick={nextPage} disabled={currentPage === maxPage}>
          Next
        </button>
      </div>
    </div>
  );
};
```
로그인 후 복사
Usage Example:
```
const App = () => {
  const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  return (
    <div>
      <h1>Paginated List</h1>
      <PaginatedList
        items={items}
        itemsPerPage={10}
        renderItem={(item) => <div>{item}</div>}
      />
    </div>
  );
};
```
로그인 후 복사
This example demonstrates a paginated list where users can navigate through pages of items. The hook handles all pagination logic,

making it reusable across different components.

Conclusion

Building reusable list components in React is a fundamental practice for creating scalable applications. By abstracting common logic, using patterns like render props, higher-order components, and hooks, you can create flexible, extensible, and maintainable list components that adapt to different use cases.

As your React application grows, adopting reusable components not only simplifies your codebase but also enhances performance, reduces redundancy, and enables rapid iteration on new features. Whether you're handling simple lists or more complex UI requirements, investing time in creating reusable components will pay off in the long run.

References

React Official Documentation

React Render Props

React Higher-Order Components

React Hooks