💀 문제 발생
state가 변경되는 부분이 없는데 useEffect가 두 번씩 실행되는 문제가 있었다.
이는 index.js의 strictMode 때문이었다.
✅ React의 Strictmode란
Strict 모드가 활성화되면, React는 안전하지 않은 생명주기 메서드를 사용하는 모든 클래스 컴포넌트 목록을 정리해 다음과 같이 컴포넌트에 대한 정보가 담긴 경고 로그를 출력합니다.
간단히 말하자면 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. (즉, 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.)
😒 사이드 이펙트 방지?
리액트는 렌더링 단계와 커밋 단계 두가지의 단계로 동작한다.
렌더링 단계는 render 함수를 호출해 이전 렌더와 비교를 수행하는 단계이고,
커밋 단계는 라이프 사이클 함수를 실행시켜 DOM 노드를 추가/변경해주는 단계이다.
그런데 렌더 단계는 커밋 단계보다 속도가 느리다. 그리고 렌더링 단계에서 여러 생명 주기 메서드가 여러 번 호출되기도 한다. 이러한 것들을 strict 모드에서는 미리 파악하고 우리에게 경고를 해주는 것이다.
의도적으로 렌더링 단계의 메서드를 두 번씩 호출하고, 문제가 없는지 확인한다.
만약 double invoke가 실행되었을 때 두 개의 결과 값이 서로 다르다면 해당 코드는 문제가 있다는 뜻이다.
✅ 해결
아무튼, strictmode를 삭제하면 불필요하게 두 번씩 실행되는 것을 막을 수 있다.
다만 아직 생명 주기 메서드에 대해 완벽히 이해하지는 못해서, 이에 대해서 앞으로 더 공부해봐야할 것 같다.
