해결된 질문
작성
·
550
1
안녕하세요. 강의를 계속 듣다가 App.js가 자꾸 두번 실행되어 index.js를 제외한 모든 코드를 강사님의 sandbox 코드를 복붙하였는데 계속 코드가 두번 실행이 되었습니다.
그리하여 이렇게 dataId가 20부터 실행되는 문제가 발생하였는데요, 그래서 index.js를 강사님 버전(React 17)로 바꾸었더니 이 문제가 해결되었습니다. React18버전으로 하면 이런 문제가 발생하는 이유가 무엇인가요?? 다음은 저의 index.js 코드입니다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const rootNode = document.getElementById("root");
ReactDOM.createRoot(rootNode).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
답변 1
2
안녕하세요 이정환입니다
index.js의 <SrictMode>를 모두 제거하시고 다시 수행해보시기 바랍니다.
StrictMode는 리액트 앱 내부의 잠재적인 문제를 확인하기 위해서 백그라운드에서 리액트 컴포넌트를 한번 더 렌더링 시키기 때문에 이렇게 콘솔이 두번 출력되는 것으로 보입니다.