[React] useEffect 2번 실행되는 이유

다음과 같이 useEffect를 사용하여 jQuery메서드 on 으로 해당 요소를 이벤트 등록을 해주었다.

그런데 해당 태그를 눌러 이벤트가 발생하면 2번이 실행돼서 왜이러지? 찾아보니깐 useEffect부분에서 두번 실행돼서 등록이 2번 되니 한번 클릭해도 두번의 이벤트가 발생하는 것이였다.

처음엔 랜더링이후 state값이 변하는게 있기때문에 한번더 했다라고 생각했는데, 해당 컴포넌트에서는 상태값을 쓰지도 않기때문에 이에 해당해서는 안되었다. 

그래서 useEffect이 한번만 실행해야하는데 2번이 되는 이유를 찾아보니

index.js에서 strictMode가 존재하면 두번 랜더링된다고하는데 이 strictMode는 검사 도구라고 생각하면되고 개발 모드에서는 오류를 잘잡기위해 두번씩 렌더링을 한다고 한다.

따라서 저 부분을 지우고 다시 실행하면

한번만 실행되는걸 확인할수있다. 아마 그전에도 useEffect이 두번씩 실행됐는데 리덕스값을 쓰면서 자동적으로 update가 되니 당연히 2번씩 실행된다고 생각했는데, 이런 사소한걸 지금 알게된거같다. 앞으론 strict모드를 제거하고 해야겠다.