[React] console.log 두번 출력될때 React.StrictMode

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

이게 한번씩 consol.log 가 2번씩 출력될때가 있다.

useEffect(() => {
    ...
    console.log("hi");
    ...
  }, []);

컴포넌트가 처음 랜더링될때 딱 한번만 실행되어야 할텐데 개발자도구를 열어서 확인해보면 2번씩 찍혀있는 경우가 있다.

이런경우는 대부분 개발모드에서 발견되는데 해결방법은 아주 간단하다.

// index.tsx

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  // <React.StrictMode>
  <App />
  // </React.StrictMode>
);

React.StrictMode 때문인데 개발단계에서 오류를 잘 잡기 위해 2번씩 출력시켜준다.

해당 라인을 주석처리해버려도되고 그냥 지워버려도 무방하다.

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

Strict 모드 – React