Custom Hook을 이용한 데이터 정렬 기능 추가하기

06 Nov 2023

reactjs

React에서는 Custom Hook을 사용하여 컴포넌트 간에 코드를 공유하고 로직을 재사용할 수 있습니다. 이번에는 Custom Hook을 이용하여 데이터 정렬 기능을 추가하는 방법을 알아보겠습니다.

1. Custom Hook 생성하기

우선, 데이터를 정렬하는 기능을 담은 Custom Hook을 생성해야 합니다. 이 Hook은 데이터 배열과 정렬 기준을 인자로 받아 정렬된 데이터 배열을 반환하는 역할을 합니다.

import { useState, useEffect } from 'react';

const useSortData = (data, sortBy) => {
  const [sortedData, setSortedData] = useState([]);

  useEffect(() => {
    // 데이터를 정렬하는 로직 작성
    const sorted = [...data].sort((a, b) => a[sortBy] - b[sortBy]);
    setSortedData(sorted);
  }, [data, sortBy]);

  return sortedData;
};

export default useSortData;

위의 코드에서는 useState와 useEffect를 사용하여 상태값을 관리하고, sortBy 인자에 따라 데이터를 정렬합니다.

2. 컴포넌트에서 Custom Hook 사용하기

이제 Custom Hook을 사용하여 컴포넌트에서 데이터 정렬 기능을 적용해보겠습니다. 아래 예시는 테이블 데이터를 정렬하는 예시입니다.

import React, { useState } from 'react';
import useSortData from './useSortData';

const Table = ({ data }) => {
  const [sortBy, setSortBy] = useState('name');
  const sortedData = useSortData(data, sortBy);

  const handleSort = (key) => {
    setSortBy(key);
  };

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => handleSort('name')}>Name</th>
          <th onClick={() => handleSort('age')}>Age</th>
        </tr>
      </thead>
      <tbody>
        {sortedData.map(({ name, age }) => (
          <tr key={name}>
            <td>{name}</td>
            <td>{age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

위의 코드에서는 Table 컴포넌트에서 useSortData Hook을 사용하여 데이터를 정렬합니다. sortBy 상태값을 변경하면서 데이터를 다시 정렬하게 되며, 클릭 이벤트를 통해 정렬 기준을 변경할 수 있습니다.

마치며

Custom Hook을 사용하여 데이터 정렬 기능을 추가하는 방법을 알아보았습니다. Custom Hook을 사용하면 다양한 컴포넌트에서 같은 로직을 재사용할 수 있으므로 코드의 중복을 줄일 수 있습니다. 필요한 로직을 Custom Hook으로 분리하여 코드를 깔끔하고 유지보수하기 쉽도록 설계하는 것이 좋습니다.

#React #CustomHook