프로젝트에 소셜 로그인 기능을 구현하기 위해 백엔드부터 프론트까지 열심히 구현중이시던 팀원분이 이슈를 가져오셨다.
테스트의 로직은
프론트에서 카카오에 인가코드 요청
-> 받아온 인가 코드를 백엔드에 전달
-> 백엔드에서 카카오에 토큰 요청(redirect url, 인가코드 이용)
-> 토큰을 프론트로 !
이런 흐름이었는데 프론트에서 백엔드에 인가 코드를 전달하는 과정에서
한번만 실행 되어야 할 useEffect
속 console.log
가 콘솔창에 두번씩 찍히는 사실을 발견하게 되었다.
useEffect 내에 백엔드와 통신하는 코드가 있으니
당연히 오류가 나버림.
useEffect야,, 정신 차려,,
useEffect(() => {},[])
위의 코드와 같이 useEffect
2번째 인자에 빈 배열을 넣어주게 되면 컴포넌트가 처음 렌더링 될때만 실행된다.
그치만 두 번 실행됐어요..
여러 가지 시도를 해보다가 똑똑한 구글님에게 여쭤보니 답이 금방 나왔다!
프로젝트의
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> // <- 이겁니다!
);
그렇습니다! 저 부분을 지우면 두 번씩 실행되는 문제가 해결이 됩니다!
👏👏👏
useEffect 오해해서 미안,,
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
늘 감사합니다,, 글을 써주시는 모든 분들 😍
구글링에서 react 2번 키워드에 1등 노출 축하드려요 ㅎㅎ 글 잘읽고 갑니다 감사해요~