Custom Hook을 사용한 다중 선택 기능 추가

06 Nov 2023

customhook

안녕하세요! 이번 글에서는 React에서 Custom Hook을 사용하여 다중 선택 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 제공하는 기능으로, 컴포넌트 간에 재사용 가능한 로직을 추상화하여 추출하는 것을 말합니다. Custom Hook을 사용하면 여러 컴포넌트에서 동일한 로직을 사용할 수 있으며, 컴포넌트의 가독성과 유지보수성을 향상시킬 수 있습니다.

다중 선택 기능 구현하기

다중 선택 기능을 구현하기 위해서는 선택한 항목들을 상태로 관리해야 합니다. 이때 Custom Hook을 사용하여 선택한 항목들을 관리하는 로직을 작성해보겠습니다.

먼저, useMultipleSelection이라는 Custom Hook을 작성합니다.

import { useState } from 'react';

const useMultipleSelection = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const toggleItem = (item) => {
    if (selectedItems.includes(item)) {
      setSelectedItems(selectedItems.filter((i) => i !== item));
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  const clearSelection = () => {
    setSelectedItems([]);
  };

  return {
    selectedItems,
    toggleItem,
    clearSelection,
  };
};

export default useMultipleSelection;

위 코드에서는 selectedItems 배열로 선택된 항목들을 관리하고, toggleItem 함수를 통해 항목의 선택/해제를 토글할 수 있습니다. 또한 clearSelection 함수를 통해 선택된 항목을 모두 지울 수 있도록 구현하였습니다.

이제 useMultipleSelection Hook을 사용하여 선택 기능이 필요한 컴포넌트에서 다음과 같이 사용할 수 있습니다.

import React from 'react';
import useMultipleSelection from './useMultipleSelection';

const MyComponent = () => {
  const { selectedItems, toggleItem, clearSelection } = useMultipleSelection();

  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li
            key={item}
            onClick={() => toggleItem(item)}
            style={{ background: selectedItems.includes(item) ? 'yellow' : 'white' }}
          >
            {item}
          </li>
        ))}
      </ul>
      <button onClick={clearSelection}>Clear Selection</button>
    </div>
  );
};

export default MyComponent;

위 코드에서는 useMultipleSelection Hook에서 반환된 selectedItems, toggleItem, clearSelection을 사용하여 선택된 항목들을 렌더링하고, 클릭 이벤트를 처리하는 로직을 작성하였습니다. 선택된 항목은 노란색으로 표시되며, “Clear Selection” 버튼을 클릭하여 선택을 초기화할 수 있습니다.

이제 Custom Hook을 사용하여 선택 기능을 간편하게 추가할 수 있게 되었습니다. 컴포넌트에서 다중 선택 기능이 필요한 경우, 위 예시를 참고하여 Custom Hook을 적용해보세요!

더 자세한 내용은 React Custom Hook 공식 문서를 참고해주세요.