Custom Hook을 활용한 위시리스트 기능 구현

06 Nov 2023

reactjs

소개

위시리스트는 많은 웹앱에서 자주 사용되는 기능 중 하나입니다. 사용자가 원하는 아이템을 저장하고 추적할 수 있는 기능으로써, 사용자 경험을 향상시키기 위해 많은 웹앱에서 제공하는 기능입니다.

이번에는 React를 기반으로 한 웹앱에서 위시리스트 기능을 구현하는 방법을 알아보겠습니다. Custom Hook인 useWishlist를 만들고, 이를 사용하여 위시리스트 기능을 구현해보겠습니다.

Custom Hook: useWishlist

useWishlist는 위시리스트를 관리하기 위한 Custom Hook입니다. 이 Hook은 로컬 상태를 사용하여 사용자의 위시리스트를 저장하고 업데이트할 수 있습니다.

import { useState } from 'react';

const useWishlist = () => {
  const [wishlist, setWishlist] = useState([]);

  const addItemToWishlist = (item) => {
    setWishlist((prevWishlist) => [...prevWishlist, item]);
  };

  const removeItemFromWishlist = (itemId) => {
    setWishlist((prevWishlist) =>
      prevWishlist.filter((item) => item.id !== itemId)
    );
  };

  return { wishlist, addItemToWishlist, removeItemFromWishlist };
};

export default useWishlist;

위 코드에서는 useState 훅을 사용하여 wishlist 배열을 초기화하고, addItemToWishlist 함수와 removeItemFromWishlist 함수를 정의합니다. addItemToWishlist 함수는 새로운 아이템을 위시리스트에 추가하고, removeItemFromWishlist 함수는 해당 아이템을 위시리스트에서 제거합니다.

위시리스트 구현

위시리스트를 사용하기 위해 위시리스트 페이지나 컴포넌트에서 useWishlist Hook을 사용할 수 있습니다. 예를 들어, 다음과 같이 위시리스트 페이지를 구현할 수 있습니다.

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

const WishlistPage = () => {
  const { wishlist, addItemToWishlist, removeItemFromWishlist } = useWishlist();

  const handleAddItem = () => {
    const newItem = /* 새로운 아이템 생성 로직 */;
    addItemToWishlist(newItem);
  };

  const handleRemoveItem = (itemId) => {
    removeItemFromWishlist(itemId);
  };

  return (
    <div>
      <h1>위시리스트</h1>
      <button onClick={handleAddItem}>위시리스트에 아이템 추가</button>
      {wishlist.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => handleRemoveItem(item.id)}>제거</button>
        </div>
      ))}
    </div>
  );
};

export default WishlistPage;

위 코드에서는 useWishlist Hook을 사용하여 wishlist, addItemToWishlist, removeItemFromWishlist를 구조 분해할당으로 가져와 사용합니다. handleAddItem 함수는 새로운 아이템을 위시리스트에 추가하고, handleRemoveItem 함수는 아이템을 위시리스트에서 제거합니다. 위시리스트는 map 메소드를 사용하여 각 아이템을 표시하고 제거 버튼으로 해당 아이템을 제거할 수 있습니다.

React 컴포넌트에서 이와 유사한 방식으로 위시리스트를 구현할 수 있습니다.

마치며

이번 포스트에서는 Custom Hook인 useWishlist를 활용하여 React 웹앱에서 위시리스트 기능을 구현하는 방법을 알아보았습니다. 이를 통해 코드의 재사용성을 높이고, 직관적이고 간편한 위시리스트 기능을 구현할 수 있습니다. 다양한 프로젝트에서 Custom Hook을 만들어 사용해보세요!

해시태그

#React #CustomHook