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

프로젝트에 소셜 로그인 기능을 구현하기 위해 백엔드부터 프론트까지 열심히 구현중이시던 팀원분이 이슈를 가져오셨다.

테스트의 로직은

프론트에서 카카오에 인가코드 요청
-> 받아온 인가 코드를 백엔드에 전달
-> 백엔드에서 카카오에 토큰 요청(redirect url, 인가코드 이용)
-> 토큰을 프론트로 !

이런 흐름이었는데 프론트에서 백엔드에 인가 코드를 전달하는 과정에서
한번만 실행 되어야 할 useEffect속 console.log가 콘솔창에 두번씩 찍히는 사실을 발견하게 되었다.

useEffect 내에 백엔드와 통신하는 코드가 있으니
당연히 오류가 나버림.

useEffect야,, 정신 차려,,

🧐 왜 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() 가 두 번씩 찍힌다면 바로 위 두 방법을 사용해보자!
안 되면 또 열심히 검색하지 뭐,, ㅎㅎ

출처:
인프런 커뮤니티 https://www.inflearn.com/questions/510296
리액트 공식문서 https://ko.reactjs.org/docs/strict-mode.html
짤막글 -https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-react-strict-%EB%AA%A8%EB%93%9C%EB%9E%80

늘 감사합니다,, 글을 써주시는 모든 분들 😍