[React] console.log가 두번 실행된다고?

🧐 왜 useEffect가 두번 실행될까?

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

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

그치만 두 번 실행됐어요..

여러 가지 시도를 해보다가 똑똑한 구글님에게 여쭤보니 답이 금방 나왔다!

프로젝트의 src/index.js에서<React.StrictMode> 태그로 <app/>이 감싸져있으면개발모드에서 (개발 단계시 오류를 잘 잡기위해) 두 번씩 렌더링됩니다.

출처: https://www.inflearn.com/questions/510296

// 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>   // <- 이겁니다!
);

그렇습니다! 저 부분을 지우면 두 번씩 실행되는 문제가 해결이 됩니다!👏👏👏useEffect 오해해서 미안,,

🧐 Strict Mode가 뭘까?

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

create-react-app으로 리액트 앱을 생성하면 기본적으로 생성되는 태그라고 한다!

자세한 설명은 react strict mode의 공식문서 를 참고 ✍

결과는?

로직엔 전 - 혀 문제가 없었다! 저 부분을 지우니 바로 동작해버림 ㅎㅎ

앞으로 console.log() 가 두 번씩 찍힌다면 바로 위 두 방법을 사용해보자!안 되면 또 열심히 검색하지 뭐,, ㅎㅎ