📚 Reference

📜 Chapter

useEffect

useEffect가 2번 실행 될 때

• 참고 자료 1 - useEffect

1. 문제 상황

   • useEffect가 2번 실행 됨.

2. 문제 원인

   useEffect(() => {}, [])
   

   • 위와 같은 코드에서 useEffect의 2번째 인자에 빈 배열을 넣어주게 되면 component가 처음 렌더링 될 때만 실행된다.

3. 해결 방법

   • 프로젝트의 src/index.js 에서 <React.StrictMode>태그로 <app/>이 감싸져 있으면 개발 모드에서 (개발 단계 시, 오류를 잘 잡기 위해) 두 번씩 랜더링 된다.
   • src/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>   // <- 이겁니다!
   );
   

   • StrictMode
     • 공식 문서 1
     • StrictMode는 React에서 제공하는 검사 도구라고 생각하면 될 것 같다.
     • 개발 모드일 때만 디버그를 하며 해당 태그로 감싸져 있는 부분은 자손까지 검사를 한다.
     • 안전하지 않은 생명 주기를 가진 컴포넌트라든지, 권장되지 않는 부분이 있다든지 배포 후 문제가 될만한 이슈들을 미리 잡는 모드라고 보면 되겠다.
     • create-react-app으로 리액트 앱을 생성하면 기본적으로 생성되는 태그라고 한다.