[React] Custom hook으로 포인트 충전과 차감 관리하기

개요

현재 개발중인 서비스 ARIPAY는 교내 매점 상품권을 온라인으로 관리할 수 있는 플랫폼이다.

지난번에 현재 잔액 조회 및 사용자 조회에 대한 개발을 마무리했고, 이제 포인트 충전 및 차감 기능을 구현해보려고 한다.

 

포인트 차감 & 충전흐름 쪼개기

우선 포인트 차감은 사용자 및 관리자가, 포인트 충전은 관리자가 할 수 있어야한다. 

1. 사용자 학생증 바코드 찍기
2. 해당 하는 학생 정보를 포함해 충전 화면 이동
3. 금액 입력
4. 충전 버튼 클릭
5. 충전 완료

그리고 차감은 아래와 같이 정리할 수 있었다.

1. 사용자 학생증 바코드 찍기
2. 해당 하는 학생 정보를 포함해 충전 화면 이동
3. 금액 입력
4. 결제 버튼 클릭
5. 충전 완료

여기에 더해, 우리가 알아야할 데이터 정보를 정리할 수 있다.

1. 학생증 바코드
2. 포인트 내역
3. 충전/결제 여부
4. 금액

고려해야할 부분

여러 곳에서 상태 관리가 되면, Custom hook을 사용할지 전역(Context)으로 사용해야할지 고민을 하게 된다.

이 때 가장 많이 생각해보는 부분은 데이터의 활용성인 것 같다.

 

Context API의 경우  props drilling을 방지하기 위해 상태를 전역 으로 관리 해주는 역할을 하는데, 무작정 사용하면 안된다. 왜냐하면 <Provider/> 컴포넌트로 감싸게 되는 순간 그 내부에 있는 자식 컴포넌트도 매번 렌더링이 일어난다. 곳곳에 데이터가 필요한 경우라면 모르겠지만, 불필요한 컴포넌트도 같이 랜더링 하게 되면서 Context Api의 의미를 잃게 된다.

 

구현과정

우선 사용자의 정보를 포함하고 있는 API에서 포인트에 대한 정보를 요청한다. 이때, 학번 및 이름 유니크한 바코드 번호와 현재 가지고 있는 포인트를 같이 요청한다.

import { axiosInstance } from "../utils/Axios";

export const getPoint = async () => {
  try {
    const response = await axiosInstance.post("/userinfo");
    return {
      number: response.data.student_number,
      name: response.data.student_name,
      code: response.data.code_number,
      point: response.data.point,
    };
  } catch (error) {
    alert("[ERROR]");
  }
};

 

그리고 가져온 포인트를 useState를 활용하여 관리해준다.

import { useState, useEffect } from "react";
import { useAuth } from "../context/authContext";

export const usePoint = () => {
  const [point, setPoint] = useState(0);
  const [name, setName] = useState("");
  const [code, setCode] = useState("");
  const [number, setNumber] = useState("");
  const { isLoggedIn } = useAuth();

  useEffect(() => {
    fetchPoint();
  }, [isLoggedIn]); // isLoggedIn과 email의 변경에 따라 fetchPoint를 다시 호출합니다.

  const fetchPoint = async () => {
    if (!isLoggedIn) return;
    
    try {
      const response = await getPoint();
      setPoint(response.point);
      setName(response.name);
      setCode(response.code);
      setNumber(response.number);
    } catch (error) {
      console.error("Error fetching point:", error);
    }
  };

  return {
    point,
    name,
    code,
    number,
  };
};

 

구현 결과

 

결론

로직을 재 사용할 수 있다는 점이 가장 큰 이점이었다. 흐름을 쪼개봤을때 충전이냐, 차감이냐의 차이만 있었을 뿐 하고자 하는 일은 비슷했기 때문에 하나의 커스텀 훅으로 묶는것이 잘 한 선택이라고 생각한다. 다만, useState를 너무 많이 쓰는게 아닐까 싶은 생각도 든다. 더 효율적인 데이터 관리 방법은 없는걸까?