여러번의 useEffect 사용으로 다양한 로직 처리하기

 

여러번의 useEffect 사용으로 다양한 로직 처리하기

1. 문제 상황

초기 state 값을 설정하기 위해 useEffect에서 비동기 함수를 사용하여 데이터를 가져와서 setCurrentReservedCount로 state를 set해야 하는 상황

단순하게 기존에 사용하던 useEffect에 로직을 추가하였더니, 기존 의존성 배열에 있던 인자들에 인해 선택한 날짜나 시간이 변경될 때마다 state가 초기 값으로 재설정되는 문제가 발생했다.

useEffect(() => {
  setReserveInfo({ reserveDate: selectedDate, reserveTime: selectedTime });

  const setInitialReservedCount = async () => {
    const initialReservedCount = await countReservationsByTimeId(classDates[0].times[0].timeId);
    setCurrentReservedCount(initialReservedCount);
  };

  setInitialReservedCount();
}, [selectedDate, selectedTime]);

위 코드에서 의존성 배열 [selectedDate, selectedTime] 때문에 선택한 날짜나 시간이 변경될 때마다 state가 초기 값으로 설정되었다.

2. 해결 방법

useEffect 훅을 추가하고 의존성 배열을 비워두어서 초기 state를 설정하는 로직을 처음 마운트 시에만 실행되도록 변경했다. 이렇게 수정하면 첫 번째 useEffect는 선택한 날짜와 시간이 변경될 때마다 실행되고, 두 번째 useEffect는 처음 마운트 시에만 실행된다.

useEffect(() => {
  setReserveInfo({ reserveDate: selectedDate, reserveTime: selectedTime });
}, [selectedDate, selectedTime]);

useEffect(() => {
  const setInitialReservedCount = async () => {
    const initialReservedCount = await countReservationsByTimeId(classDates[0].times[0].timeId);
    setCurrentReservedCount(initialReservedCount);
  };

  setInitialReservedCount();
}, []);

 

 

3. 한 컴포넌트에서 useEffect를 여러번 사용해도 될까?

지금까지 useEffect는 한번씩만 사용해왔기 때문에 암묵적으로 한번만 사용해야 한다는 편견아닌 편견이 있어서 찾아보았다. 답은 useEffect를 한 컴포넌트에서 여러번 사용해도 된다고 한다.

공식 문서에서도 다양한 로직을 처리하기 위해 useEffect를 여러 번 사용하는 것을 권장하고 있다.

따라서 여러번의 useEffect를 사용하여 각각의 로직을 분리하면 useEffect는 서로 다른 의존성 배열을 가질 수 있으므로 필요한 로직이 필요한 시점에 적절하게 실행된다.

 

공식문서

https://ko.legacy.reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concernshttps://react.dev/reference/react/useEffect