[React] 버튼 자동 클릭 (addEventListener 추가 후 꼭! 제거!!)

오리 mbti 프로젝트 ver2를 제작하면서 앞서 얘기가 나왔던 결과 페이지로 자동 이동 기능을 구현하던 중에.. result 페이지로 이동하는 버튼을 자동으로 클릭되게 만들어야 했어서 한 2~3일?? 정도를 잡아먹은 것 같다ㅜㅜ..! 중간에 포기해야하나 고민했으나 끝까지 머리 싸고 있다가 해결할 수 있어서 다행!!

1. 우선 Link를 사용해서 결과값은 state로 넘기고 있었는데, 이 Link태그에 className으로 "result_btn"을 추가해주고
   

2. 대망의 addEventListener부분.. 이전에 JQuery 공부할 때에는 trigger을 사용해서 편하게 자동으로 클릭이 되도록 만들었었는데..ㅜㅜ 정말 여러가지 고민해보다가 우선 useEffect 안에 window.addEventListener를 넣어주고, querySelector을 사용하여 아래에 className으로 이름을 지정했던 result_btn을 btnEl에 넣어주었다.
   이후, setTimeout을 사용하여 3초 후에 btnEl에 click함수가 사용되도록 해주었는데..
   처음 이렇게 처리했더니 다른 컴포넌트로 이동될 때마다 오류가 떠서 addEventListener에 대해서 좀 더 공부를 해보다보니, remove로 이벤트 리스너를 제거해주지 않으면 오류 뿐이 아니라 메모리 누수까지 일어나 대참사!!가 일어나는 경우가 왕왕 있는 모양이었다.
   그래서 추가한 removeEventListener는 꼭!! 해당 컴포넌트를 벗어나는 시점에는 제거해줘야 한다는 것을 깨닫고,
   useEffect의 return 함수에 removeEventListener을 넣어주었다.
   

  useEffect(() => {
    (async () => {
      try {
        window.addEventListener("click", function () {});
        const btnEl = document.querySelector(".result_btn");
        setTimeout(() => {
          btnEl.click();
        }, 3000);
      } catch (error) {
        console.log("에러: " + error);
      }
      return () => {
        window.removeEventListener("click", function () {});
      };
    })();
  }, []);

3. 추가로, 이전에 검사 결과값을 새로고침 해주기 위하여 Main페이지가 처음 렌더링 될 때, reload 함수를 추가해주었다.
   

  useEffect(() => {
    if (!localStorage.getItem("refreshed")) {
      localStorage.setItem("refreshed", true);
      window.location.reload();
    }
  }, []);

오늘의 결론: addEventListener을 사용했다면 꼭 잊지말고 removeEventListener을 사용해주자!!!!!!!