[React] StrictMode

분명 API 호출 코드는 한 번만 작성했는데, 네트워크 탭에는 똑같은 요청이 두 번 찍히는 경우를 경험해 보셨나요?

처음엔 제 코드에 무한 루프가 걸린 줄 알고 식은땀이 났지만, 범인은 예상치 못한 곳에 있었습니다.

바로 StrictMode인데요, 이에 대해 이야기해 보려 합니다.

 

"로그가 두 번 찍히는 건 버그가 아니라, 리액트가 당신의 코드를 더 튼튼하게 만들고 있다는 증거입니다."

1. StrictMode란?

한마디로 리액트의 엄격한 감독이라고 할 수 있다고 합니다. 애플리케이션의 잠재적인 버그를 미리 찾아내기 위해 개발 모드에서만 작동하는 안전장치예요.

• 배포(Build)하면 사라짐: 실제 사용자에게는 한 번만 실행되니 안심하세요!
• 시각적 요소 없음: 화면에는 아무것도 나타나지 않습니다.

 

2. 왜 굳이 두 번 실행할까?

리액트는 여러분의 코드가 순수한(Pure)지 테스트해보고 싶어 합니다.

• 사이드 이펙트 체크: 컴포넌트를 두 번 렌더링해 봐도 똑같은 결과가 나오는지 확인합니다.
• 정리(Cleanup) 확인: useEffect에서 시작한 작업(타이머, 이벤트 등)을 제대로 껐는지 확인하기 위해 강제로 껐다 켜봅니다.
• 미래 대비: 조만간 사라질 구식 문법(Deprecated API)을 쓰면 즉시 경고를 날려줍니다.

 

3. StrictMode의 장점

• 안전하지 않은 생명주기 메서드 감지: 곧 사라질 구식 문법(Deprecated API)을 썼을 때 경고를 줍니다.
• 레거시 문자열 ref 사용 경고: 보안이나 성능상 좋지 않은 옛날 방식을 찾아냅니다.
• 의도치 않은 부작용 검사: useEffect 내부의 정리(Cleanup) 함수가 잘 작동하는지 강제로 마운트/언마운트를 반복하며 테스트합니다.

4. StrictMode 지워도 될까?

결론부터 말씀드리면 "웬만하면 그대로 두세요"입니다.

로그가 두 번 찍히는 게 당장 눈에 거슬릴 순 있지만, StrictMode를 끄는 것은 안전벨트를 풀고 운전하는 것과 비슷합니다. 개발 단계에서 이 잔소리를 잘 견뎌내야 나중에 운영 서버에서 터지는 대형 사고를 막을 수 있습니다.

💡 팁: 쿼리가 두 번 나가는 게 너무 헷갈린다면, 개발 중에만 잠시 주석 처리해서 확인해 본 뒤 다시 켜는 습관을 들이는 것이 좋습니다.

 

오늘의 결론!

StrictMode 때문에 API가 두 번 호출되는 건 정상이며, 배포 시에는 자동으로 해결됩니다. 그러니 굳이 지우기보다는 리액트의 가이드라인을 따라 더 건강한 코드를 짜는 연습을 해봅시다!

 

오늘도 긴 글 읽어주셔서 감사합니다~