[react/트러블슈팅] useEffect, Redux 상태를 활용해 Toast 알림 문제 해결하기

Redux 상태를 활용해 Toast 알림 문제 해결하기

 

 

---

       문제 상황 ⚠️ 

버튼에서 toast()를 실행해야 하는데, Dex 페이지(상위 컴포넌트)에서 렌더링되므로 알림이 뜨지 않았다.

처음에는 버튼이 클릭됐을 때 toast가 실행되도록 했더니, 버튼 위에 토스트 알림이 뜨는 대참사..

(포켓몬 덱스 프로젝트를 하고 있었어서 버튼이 150개였음.)

 

 

---

       원인 분석 🧐 

toast()는 Dex 페이지에서 실행되지만, 버튼 클릭 시 상태 변경이 Dex에 즉시 반영되지 않는다.

어떻게 해야될진 모르겠지만 우선 상태를 관리해서 정보를 넘겨줘야겠다고 생각했다.

 

---

       해결 과정 💦 

그래서 state에 alert: false를 추가했다.

이후 버튼을 눌렀을 때 특정 조건(슬롯이 가득 찼거나, 이미 잡은 포켓몬일 때)에 따라 alert: true로 상태를 변경하도록 했다.

const initialState = {
  alert: {
    full: false,  // 슬롯이 가득 찼을 때
    exist: false, // 이미 잡은 포켓몬일 때
  }
};

그리고 토스트 알림이 렌더링 돼야 하는 Dex 페이지에서 상태가 변경됐을 때 함수가 실행되는 useEffect를 사용했다.

 

 

---

        최종 해결 방법 ✅ 

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify';
import { ALERT } from '../redux/actions';

function AlertHandler() {
  const dispatch = useDispatch();
  const alert = useSelector((state) => state.pokemon.alert);

  useEffect(() => {
    if (alert.full) {
      toast.warn("포켓몬 슬롯이 가득 찼어요!");
      dispatch(ALERT({ full: false, exist: false })); //초기화
    }
    if (alert.exist) {
      toast.info("이미 잡은 포켓몬이에요!");
      dispatch(ALERT({ full: false, exist: false })); //초기화
    }
  }, [alert, dispatch]);
}

그렇게 useEffect로 상태 변화를 감지하고 있다가, 상태가 변경되면 토스트 알림을 띄우고

곧바로 false로 변경해 초기화 하는 방식으로 완성했다.

 

 

---

정말 한단계 한단계 몇시간을 낑낑대면서 고생했다....

항상 알고나면 별거 아니었고,,, 글로 써도 쓸 게 별로 없어서 조금 허탈하다.

그치만 고생하며 알아낸 만큼 기억에 오래 남을 거 같다.

헤맨만큼 내 땅~이니까 이제 useEffect, toast 라이브러리도 내꺼~~~~