📱테스트 환경
"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
'Javascript > React' 카테고리의 다른 글
[React] 검색어 하이라이트 효과 (0) | 2024.04.15 |
---|---|
[React] "@babel/plugin-proposal-private-property-in-object" ... (0) | 2024.04.12 |
[React] 이미지 클릭 시 파일 선택 <Input /> 사용하기 (0) | 2024.04.09 |
[React] input value 값 수정 안될때 defaultValue (0) | 2024.04.05 |
[React] axios instance 만들어서 사용하기 (0) | 2024.04.05 |