Custom Hook을 활용한 별점 기능 구현

06 Nov 2023

customhook

개요

이번 프로젝트에서는 React의 Custom Hook을 활용하여 별점 기능을 구현해보려고 합니다. 이러한 기능은 평가나 리뷰 작성 등의 기능을 구현할 때 자주 사용되며, Custom Hook을 사용하면 별점 기능을 효율적으로 구현할 수 있습니다.

Custom Hook 만들기

우선, useStarRating이라는 Custom Hook을 만들어보겠습니다. 이 Hook은 별점 기능과 관련된 상태와 함수들을 관리할 것입니다.

import { useState } from 'react';

const useStarRating = (initialRating = 0) => {
  const [rating, setRating] = useState(initialRating);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
  };

  return {
    rating,
    handleRatingChange,
  };
};

export default useStarRating;

위의 코드에서는 useState Hook을 사용하여 rating이라는 상태 변수와 handleRatingChange라는 함수를 정의하고, 이를 반환합니다. rating은 현재 선택된 별점을 저장하는 변수이며, handleRatingChange 함수는 새로운 별점을 설정하기 위해 사용됩니다.

사용하기

이제 useStarRating Hook을 사용하여 별점 기능을 구현해봅시다.

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

const StarRating = () => {
  const { rating, handleRatingChange } = useStarRating();

  return (
    <div>
      <h2>별점: {rating}/5</h2>
      <div>
        {[...Array(5)].map((_, index) => (
          <span
            key={index}
            onClick={() => handleRatingChange(index + 1)}
            style={{ cursor: 'pointer' }}
          >
            {index + 1 <= rating ? '⭐️' : '☆'}
          </span>
        ))}
      </div>
    </div>
  );
};

export default StarRating;

위의 코드에서는 useStarRating Hook을 호출하여 rating과 handleRatingChange를 가져옵니다. 이를 이용하여 현재 별점을 표시하고, 사용자가 별점을 클릭할 수 있는 UI를 만들어줍니다. 클릭 이벤트가 발생하면 handleRatingChange 함수를 호출하여 새로운 별점을 설정합니다.

결론

Custom Hook을 활용한 별점 기능 구현은 매우 간편하며 재사용성이 높습니다. 이를 통해 React 프로젝트에서 별점 기능을 빠르게 구현해볼 수 있으며, 더 많은 유연성과 효율성을 얻을 수 있습니다.

#참조

React 공식문서