React StrictMode: useEffect 이중 실행, 개발자를 위한 친절한 안전 테스트

핵심 기술

React의 StrictMode는 개발 모드에서 컴포넌트를 의도적으로 두 번 렌더링하여 잠재적인 부작용(Side Effect) 및 레거시 API 사용을 감지하는 기능입니다. 특히 useEffect 훅이 개발 모드에서 두 번 실행되는 현상의 원인과 해결 방법을 설명하며, 이는 실제 배포 환경에서는 발생하지 않음을 강조합니다.

기술적 세부사항

• useEffect 이중 실행: React 개발 모드에서 useEffect가 두 번 실행되는 것은 StrictMode의 동작 방식 때문입니다.
  • 목적: 컴포넌트가 마운트 해제 후 다시 마운트되어도 상태가 올바르게 유지되는지, 예상치 못한 부작용이 없는지 검사합니다.
  • 원리: 컴포넌트를 한 번 실행하고, 이후 해당 컴포넌트를 언마운트한 뒤 다시 마운트하여 동일한 동작을 수행합니다.
• StrictMode 검사 항목:
  • 잠재적인 부작용 (Side Effect) 탐지
  • 오래된(레거시) API 사용 경고
• 실제 문제 발생 예시: useState와 useEffect를 함께 사용하는 경우, 버튼 클릭 시 Toast 알림이 두 번 뜨는 현상 발생 가능.
• 배포 환경 동작: StrictMode는 배포 환경에서는 자동으로 비활성화되므로, useEffect는 한 번만 실행됩니다.
• 권장 해결책:
  1. 이해하고 넘어가기: 배포 시 정상 작동하므로 가장 권장되는 방법입니다. (추천도: ⭐⭐⭐⭐⭐)
  2. useEffect 정리(cleanup) 함수 및 useRef 활용: 명확한 상태 관리를 통해 잠재적 문제를 예방할 수 있습니다. (추천도: ⭐⭐⭐⭐)
  3. StrictMode 비활성화: 즉각적인 문제 해결은 되나, 잠재적 위험이 증가합니다. (추천도: ⭐⭐)
• useEffect 의존성 배열: 무한 API 호출 방지를 위해 useEffect의 의존성 배열을 명확히 관리하는 것이 중요합니다. (예: 빈 배열 [] 또는 특정 상태/props [userId]).

개발 임팩트

• 코드 안정성 향상: 개발 과정에서 잠재적인 버그를 조기에 발견하고 수정하여 서비스 런칭 후 발생할 수 있는 문제를 예방합니다.
• 코드 품질 개선: 컴포넌트의 예측 가능성과 견고성을 높여 팀원 간 코드 신뢰도를 증진시킵니다.
• React 개발 이해도 증진: StrictMode의 역할을 이해함으로써 React의 동작 방식을 더 깊이 이해하게 됩니다.

커뮤니티 반응 (콘텐츠 내 언급 기준)

• 콘텐츠 내용에 따르면, StrictMode는 개발자를 위한 '안전벨트'와 같다는 비유를 통해 그 중요성을 강조합니다.
• useEffect의 이중 실행에 대해 당황하지 않고 'React가 나를 도와주는구나'라고 긍정적으로 받아들이는 태도를 권장합니다.