react에서 렌더링이 두 번씩 발생하던 이유

테스트용 console.log

두 번 출력된다

 react를 이용하면서 뭔가 이상하다는 것을 느꼈다. 가장 이상하다 느꼈던 순간은 어떤 컴포넌트가 두 번 렌더링된 걸 발견했을 때였다. 아무리 살펴보아도 두 번씩 렌더링 될 이유가 없었기에 몇 시간동안 끙끙대다가 결국 이유를 알게 되었다.

 

 

React.StrictMode때문에 일어난 일이었다.

컴포넌트의 constructor와 같은 메서드를 의도적으로 두 번 호출하면 strict mode가 이와 같은 패턴을 쉽게 찾을 수 있도록 합니다.

 

 React에서 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구인 StrictMode 때문에 두 번씩 렌더링 되었던 것이다.

 

 

 이와 같이 <React.StrictMode> </React.StrictMode>를 지워주니 문제를 해결할 수 있었다.

---

출처: https://ko.reactjs.org/docs/strict-mode.html