반응형
🤔 문제 발생
console.log(data);
위와 같은 코드를 쳤을 때 콘솔에 두개로 출력이 되었다.
반응형
😶🌫️ 문제 해결
이러한 현상은 StrictMode 때문이다. React로 만든 파일에 들어가면 index.js 파일이 존재한다. 아래는 index.js 파일이다.
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
reportWebVitals();StrictMode는 앱에서 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않고 자손들에 대한 부가적인 검사와 경고를 활성화한다.
그러나, StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. 즉 console.log()가 두 번 뜨는 것은 StrictMode로 인한 정상적인 상황으로, 만약 이것이 거슬린다면 index.js에서 출력할 파일을 감싸고 있는 <StrictMode></StrictMode>를 제거하면 된다.
StrictMode는 다음과 같은 부분에서 도움을 줄 수 있다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
👇🏻 결과 화면
반응형
