이번 포스트에서는 React의 Custom Hook을 사용하여 목록 정렬 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수 컴포넌트에 상태 로직을 재사용하기 위해 사용되는 기능입니다. 이를 통해 중복 코드를 피하고, 컴포넌트 간에 상태 로직을 쉽게 공유할 수 있습니다.

목록 정렬 기능 구현하기

1. useListSort Custom Hook 생성

   import { useState, useEffect } from 'react';
   
   const useListSort = (list) => {
     const [sortedList, setSortedList] = useState(list);
   
     useEffect(() => {
       // 목록 정렬 로직
       const sorted = list.sort((a, b) => a - b);
       setSortedList(sorted);
     }, [list]);
   
     return sortedList;
   };
   
   export default useListSort;
   

   위 예시 코드에서는 useListSort라는 Custom Hook을 생성했습니다. 이 Hook은 목록을 받아와 정렬된 목록을 반환합니다. useEffect를 사용하여 목록이 변경될 때마다 정렬을 수행하도록 구현했습니다.

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

   import React from 'react';
   import useListSort from './useListSort';
   
   const ListComponent = () => {
     const list = [3, 1, 2, 4, 5];
     const sortedList = useListSort(list);
   
     return (
       <ul>
         {sortedList.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
     );
   };
   
   export default ListComponent;
   

   위 컴포넌트에서는 useListSort Custom Hook을 사용하여 목록을 정렬하고, 정렬된 목록을 렌더링합니다. 이를 통해 컴포넌트에서 로직을 분리하고, 재사용 가능한 목록 정렬 기능을 구현할 수 있습니다.

마무리

Custom Hook을 사용하면 React에서 상태 로직을 재사용하기 편리하게 관리할 수 있습니다. 이번 포스트에서는 Custom Hook을 사용하여 목록 정렬 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 활용하면 코드의 재사용성을 높이고 개발 효율성을 향상시킬 수 있으므로, 적절하게 활용해보시기 바랍니다.

#React #CustomHook