[React] console.log()가 두번씩 찍힌다

 

console.log 로 값을 찍어보는데 값이 두번씩 찍히는 증상이 나타났다. 렌더링이 두 번 일어난다는 얘기인데...

어디서 랜더링을 두번 시키는건지 개발자도구에서 브레이크포인트 걸고 돌려도 나도모르는 어디선가 2번 호출을 하고 있는 것을 발견..

 

이유는 <React.StrictMode> 때문이었다.

index.js 파일에 보면 우리가 만든 <App>컴포넌트가 <React.StrictMode>태그로 감싸져있는 모습을 볼 수 있다.

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

이것때문에 함수가 이중으로 호출된 것이다.

 

StrictMode?

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다 라고 공식문서에 나와있는데 사이트에 사용 예시까지 잘 나와있다.

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

Strict 모드 – React