문제점 & 해결방법

console을 확인해 본 결과 render가 계속 두번이나 진행되고 있었다
setstate도 실행되지 않는데 왜 계속 render가 두번이나 될까?
다른 컴포넌트들도 계속 console을 찍어 확인해 봤지만 이유를 찾지 못했다... 😑

index.js에서 <React.StrictMode> 코드를 삭제해본 결과 정상적으로 한번만 render가 되었다! 도대체 뭐가 문제였던걸까??

Strict 모드

StrictMode는 애플리케이션 내의 문제를 알아내기 위한 도구이다. 자손들에 대한 검사와 경고를 활성화 한다.
StrictMode는 아래와 같은 부분에서 도움이 된다

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

비동기 react 어플에서는 특정 생명주기가 안전하지 않은데 서드 파티 라이브러리를 사용한다면 안전하지 않는 생명주기가 사용되는지 알기 어렵기 때문에 이 경우에 strict모드가 도움이 된다. stric모드는 부작용을 찾아주는 것을 불가능하나 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와준다. 이는 의도적으로 이중으로 호출하여 찾을 수 있다고 한다!