최근 봤던 면접에서도 해당 질문이 들어왔었고, 내가 CSR 환경에서의 개발을 할 때도 useEffect를 사용하면 렌더링이 2번 일어나는 경험을 한 적이 매우 많았다.
이론상 useEffect 내부에 작성한 함수는 렌더링이 되며 1번만 일어나야 하는데, 왜 2번씩 수행되는지 이유를 알아보도록 하자!
참고: React 공식문서 Strict Mode, React 18.2 업데이트 사항, 페이스북 깃허브의 이슈페이지
부족한 부분에 대한 보충설명 댓글은 언제나 환영입니다! ✨
☄️ Strict Mode (엄격 모드)
우선 그 이유의 가장 큰 틀이 되는 개념은 바로 엄격 모드다!
해당 단어는 리액트 프로젝트를 생성 후, index.tsx 파일을 확인해보면 볼 수 있을 것이다.
import React from 'react';
import { createRoot } from 'react-dom/client';
import './styles/index.scss';
import { RecoilRoot } from 'recoil';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = createRoot(rootElement);
root.render(
<React.StrictMode> // 📌 여기 주목!!
<RecoilRoot>
<App />
</RecoilRoot>
</React.StrictMode>,
);
reportWebVitals();엄격 모드가 뭔데?
그럼 엄격 모드가 무엇인지부터 알아보도록 하자.
엄격 모드는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구다.
UI를 렌더링하지 않고, 하위 컴포넌트들에 대한 검사와 경고를 띄워주기도 한다.
(그래서 검사를 원하는 하위 컴포넌트들이 있을 때, 해당 하위 컴포넌트들의 상위 컴포넌트에 Strict Mode를 걸어도 된다)
또, 개발할 때 도와주는 도구인만큼 개발 모드에서만 활성화된다!
이런 엄격 모드는 다음과 같은 곳에 도움을 준다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트를 발견한다.
- 레거시 문자열 Ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
엄격모드와 useEffect는 어떤 관계일까?
React 18.2 버전의 업데이트 사항을 확인해보면 아래의 변경 사항을 확인할 수 있다.
여기서 핵심 사항은 다음과 같다.
Strict Mode의 새로운 개발 체크 도구를 소개한다.
React는 컴포넌트가 처음 렌더링될 때 마운트를 시키고, 자동적으로 언마운트 후 다시 마운트 된다. 그리고 다시 마운트될 때 이전 상태를 복원한다.
프로젝트에서 직접 실행시켰을 때 예시를 한 번 가져와봤다.
⚡️ [useEffect return문이 없는 경우]
⚡️ [useEffect return문이 있는 경우]
return 문을 넣고 확인했을 때
mount ➡️ unmount ➡️ 다시 mount
의 과정을 더욱 확실하게 볼 수 있다.
이렇게 useEffect로 렌더링이 2번 되는건 Strict Mode로 인한 자연스러운 현상이다.
그러나,
- 종속성이 필요
- Mount, Unmount 되는 경우의 구분이 확실하게 필요
언마운트 시키는 return문을 적절하게 활용하여 원하는 흐름으로 로직이 잘 동작하는지 확인하는 게 개발에 도움을 줄 것이라고 생각한다 :)
