4. 리액트의 개발 서버에서 useEffect가 2번 실행되는 이유
- 답변)
- 의도 : 자칫 지나치기 쉬운 리액트의 기본 개념을 확인.
개발에 호기심이 많아야 알 수 있는 항목.
- 모범 답안 : 단리액트의 StrictMode 때문. 이 모드를 켜게 되면 오류를 피할 수 있도록 엄격한 개발 환경을 제공하는데, 여기에 useEffect가 2번 실행되는 이유가 있다.
예를 들어 개발자가 언마운트 상황을 테스트하려고 한다. 언마운트 시에 클린업함수가 잘 작동하는지 여부를 확인하기 위함인데, 이 상황을 테스트하려면 매번 컴포넌트의 마운트와 언마운트를 수동으로 실행하는 번거로움이 생긴다. 그래서 리액트는 처음에 컴포넌트가 생성된 이후 마운트-언마운트-다시 마운트의 과정을 거치게 된다.
이로써 개발자는 따로 수동으로 작동해주지 않아도 언마운트 상황을 테스트 할 수 있게 된다. 이는 물론 개발 서버 한정이고, 배포 서버에서는 자연스럽게 마운트-언마운트 한 사이클만 진행.
- 의도 : 자칫 지나치기 쉬운 리액트의 기본 개념을 확인.
StrictMode란?
StrictMode는 리액트에서 제공하는 개발용 도구. React.StrictMode는 컴포넌트의 잠재적인 문제를 사전에 발견할 수 있도록 돕기 위해 사용한다.
- 오류를 피하기 위해 엄격한 개발 환경 제공,
- 렌더링 과정에서 문제가 될 수 있는 부분을 미리 감지해 경고 발생시킴.
- 배포 환경(프로덕션)에서는 아무런 영향을 주지 않으며 개발 환경에서만 작동.
StrictMode의 주된 목적
- 부수 효과 검사
: useEffect, useLayoutEffect 같은 훅이 제대로 동작하는지 검사합니다. - 라이프사이클 메서드의 예상치 못한 동작 검사
- 레거시 API 사용 감지
: React의 최신 방식에 맞지 않는 코드나 메서드를 감지해 경고를 발생시킨다.
useEffect가 2번 실행되는 이유
React.StrictMode에서는 컴포넌트가 마운트되었다가 언마운트되고 다시 마운트되는 과정을 한 번 더 실행하는데, 이 과정은 다음의 이유 때문에 의도적으로 설계된 것이다.
1. 클린업 함수 테스트
React는 useEffect의 클린업 함수가 올바르게 실행되는지 확인하기 위해
마운트 → 언마운트 → 다시 마운트의 과정을 실행한다.
만약 클린업이 잘못 구현되었거나 메모리 누수가 있다면 이 과정에서 문제를 감지할 수 있다.
🖥️ jsx
import React, { useEffect } from "react";
function ExampleComponent() {
useEffect(() => {
console.log("✅ useEffect 실행됨");
return () => {
console.log("🧹 useEffect 클린업 실행됨");
};
}, []);
return <div>StrictMode 테스트</div>;
}
export default ExampleComponent;출력 결과 (StrictMode 사용 시)
plaintext
✅ useEffect 실행됨
🧹 useEffect 클린업 실행됨
✅ useEffect 실행됨
첫 번째 useEffect 실행 → 컴포넌트가 마운트됨
클린업 함수 실행 → 컴포넌트가 언마운트됨
다시 useEffect 실행 → 컴포넌트가 다시 마운트됨이 과정을 통해 클린업 로직의 정상 동작을 확인할 수 있다.
2. 잠재적 버그 감지
개발자가 컴포넌트를 작성할 때 간혹 잘못된 의존성이나 부수 효과를 추가할 수 있는데, StrictMode를 통해 마운트-언마운트-재마운트를 실행하면 이러한 버그를 빠르게 발견할 수 있다.
3. StrictMode 적용 방법
StrictMode는 리액트 개발 환경에서만 활성화되며 배포 버전에서는 제거됩니다.
적용 예시
보통 index.js 파일에 다음과 같이 감싼다.
🖥️ jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);<React.StrictMode>로 감싸진 컴포넌트들은 엄격한 검사를 받고,
이를 통해 부수 효과와 라이프사이클 메서드의 잠재적 문제를 사전에 확인 가능.
StrictMode 기본 지식
-
개발 서버에서만 작동
: StrictMode는 개발 환경에서만 적용되며, 배포(프로덕션)에서는 영향이 없다. -
useEffect의 실행
: StrictMode는 의도적으로 useEffect를 두 번 실행시켜 클린업 함수의 정상 작동 여부를 검사한다. -
잠재적 버그 예방 : 잘못된 의존성이나 부수 효과를 미리 감지하여 애플리케이션 개발을 안정화.
-
성능에는 영향 없음
: 배포 시 StrictMode가 제거되기 때문에 애플리케이션 성능에는 영향을 미치지 않는다.
🍓 TIL - Strict Mode
❓ Strict Mode에서 2번 실행되는 것은 useEffect훅 하나인가?
➡️ 아니다. 컴포넌트 자체가 2번 실행된다.
