이러저러한 React 공부를 할 때 한 번도 일어나지 않은 console.log("두 번 출력 사건..") 왜 한 번도 보지 못 한 것이며 평소에.. console.log찍는 버릇을 안들여서 나만 처음 보는 오류인건가..? 하고 당황스러웠다.
분명히 console.log는 한 번 찍혀있늗네 출력은 두번되는 상황.
도대체 W H Y ? ..
구글링 해보니 이러한 현상은 StrictMode때문이라고 한다.
React환경에서 작성한 코드를 출력하기 위해 만든 index.js파일을 확인해보면
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);이렇게 <App />을 감싸고 있다.
StrictMode는 앱 내의 잠재적인 문제를 알아내기 위한 도구이며 Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 한다고한다.
Strict모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.
StrictMode는 아래와 같은 부분에서 도움이 됩니다.
안전하지 않은 생명주기를 사용하는 컴포넌트 발견
레거시 문자열 ref 사용에 대한 경고
권장되지 않는 findDOMNode 사용에 대한 경고
예상치 못한 부작용 검사
레거시 context API 검사
🔨..우선은 <App />을 감싸고있는 <React.StrictMode>를 삭제해서 해결했다.
하지만 이는 괜히 만들어진 기능이 아니기 때문에 차차 더 공부한 후 다시 추가하여 이 문제를 해결할 수 있는 다른 방안을 찾아보아야겠다.
출처 : ko.reactjs.org/docs
