🎉 아무도 안 알려준 useEffect 두 번 호출의 비밀 (+ 리액트 꿀팁까지!) 🚀😎

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자 대상자_정보 출력

• *React 개발자, 특히 StrictMode와 useEffect 동작 원리에 대해 궁금한 초보자**
• 난이도: 초보자~중급자 대상, 개발 모드와 배포 환경 차이를 이해하는 데 초점*

핵심 요약

• useEffect는 리액트 StrictMode에서 두 번 호출되는 것이 정상적인 동작이며, 배포 환경에서는 한 번만 실행**됨
• useEffect의 의존성 배열을 제대로 관리하지 않으면 무한 루프 발생 가능성 ([] 또는 [userId] 등 명확한 의존성 설정 필수)
• next.config.js에서 reactStrictMode: true는 개발 환경에서만 활성화**되어, 배포 시 자동 비활성화됨

섹션별 세부 요약

###1. StrictMode의 목적과 useEffect 두 번 호출의 원리

• 리액트가 컴포넌트를 두 번의 리허설 공연처럼 실행해 부작용과 레거시 API 사용 경고를 사전에 탐지
• 예: useEffect(() => { ... }, [])는 개발 모드에서 두 번 실행되지만, 배포 환경에서는 한 번만 실행

###2. 예제: Toast 알림이 두 번 뜨는 문제

• useEffect의 의존성 [saved]와 handleSave가 상태 업데이트 후 즉시 실행되어 개발 모드에서 두 번 호출
• 배포 환경에서는 정상적으로 한 번만 실행되며, 메모리 누수 또는 무한 API 호출 예방

###3. 해결 방안 및 권장 사항

• useEffect의 의존성 배열을 명확히 설정 (예: [], [userId] 등)
• useRef와 cleanup 함수로 상태 관리 (예: useEffect(() => { ... }, [userId]))
• next.config.js에서 reactStrictMode: true는 개발 환경에서만 활성화되어, 배포 환경에서는 자동 비활성화**

결론

• useEffect 두 번 호출은 리액트의 안전성 테스트이며, 배포 환경에서는 정상 작동
• 의존성 배열을 명확히 설정하고, cleanup 함수를 통해 상태 관리해야 무한 루프 및 부작용 방지
• StrictMode는 개발자에게 안전벨트로, 활성화를 권장하며, 배포 시 자동 비활성화됨