strict mode로 개발할 때 useEffect 외에 다른 훅이나 함수도 무조건 2번씩 실행돼? 아니면 useEffect만 유일하게 2번 실행돼?
좋은 질문이에요!
React.StrictMode 환경에서 useEffect만 특별히 2번 실행되는 것은 아닙니다.
엄밀히 말하면 StrictMode의 목적은,
일부 React 함수나 훅들의 동작을 더 엄격하게 검사하는 것입니다.
그 결과 특정 상황에서는 컴포넌트가 2번 렌더링되기도 하고,
다른 함수나 훅도 영향을 받을 수 있습니다.
1. StrictMode가 어떤 작업을 하는가?
React.StrictMode는 다음과 같은 검사를 실행한다.
-
부수 효과 검사
useEffect, useLayoutEffect의 클린업 함수가 정상적으로 실행되는지 확인한다.
이 과정에서 마운트 → 언마운트 → 다시 마운트를 강제로 수행한다. -
컴포넌트의 이중 렌더링
컴포넌트의 함수형 컴포넌트 본문도 두 번 실행된다.
예를 들어, 컴포넌트 내부에 있는 상태 초기화, useState 호출 등이 두 번 실행되는데, 이중 렌더링은 의도적인 것으로, React의 버그를 사전에 잡기 위한 적용이다. -
기타 React 메서드 검사
componentWillMount, componentWillUpdate와 같은 레거시 라이프사이클 메서드를 감지하고 경고를 띄운다.
2. useEffect 외 다른 훅들도 2번 실행되는가?
StrictMode에서는 컴포넌트가 두 번 렌더링되므로, 컴포넌트 내에 포함된 모든 훅이 두 번 호출될 수 있다.
🖥️ jsx
import React, { useState, useEffect } from "react";
function ExampleComponent() {
const [count, setCount] = useState(0);
console.log("🎨 컴포넌트 렌더링됨");
useEffect(() => {
console.log("✅ useEffect 실행");
return () => {
console.log("🧹 useEffect 클린업 실행");
};
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount((prev) => prev + 1)}>Increase</button>
</div>
);
}
export default ExampleComponent;StrictMode 적용 시 출력 결과
index.js에서 <React.StrictMode>로 감싼 경우
🎨 컴포넌트 렌더링됨 <-- 첫 번째 렌더링
✅ useEffect 실행
🧹 useEffect 클린업 실행
🎨 컴포넌트 렌더링됨 <-- 두 번째 렌더링 (StrictMode 검사 목적)
✅ useEffect 실행
주의점
useState와 같은 훅도 두 번 실행되긴 하지만, React는 동일한 상태를 중복으로 저장하지 않는다. 즉, 상태의 값은 동일하게 유지됩니다.
useEffect와 같은 부수 효과 훅은 클린업 함수까지 검사하기 때문에 특히 눈에 띄게 두 번 실행된다.
➡️ StrictMode가 활성화되면 컴포넌트 전체가 두 번 렌더링되므로
모든 훅 (useState, useEffect 등)과 컴포넌트 내부의 코드가 두 번 실행.
하지만 useEffect는 클린업 함수까지 포함하여 "마운트 → 언마운트 → 재마운트"를 검사하기 때문에 특히 눈에 띄는 것.
➡️ 이 모든 과정은 개발 중에 버그를 사전에 감지하고 안정적인 코드를 작성할 수 있도록 하는 것이 목적. 배포(프로덕션) 환경에서는 StrictMode가 비활성화되므로 이러한 이중 실행은 발생하지 않는다.
