- 리액트의 Strict 모드는 왜 필요할까요?
- 답변)
- 의도: 개발 환경에 따른 모드에 대해 알고 있는지 확인하는 질문
- 모범 답안: 마치 ESLint가 필요한 이유와 같습니다. 우리는 사람이고 누구든지 완벽할 수는 없습니다. 그래서 linter가 안티 패턴을 잡아주는 것이구요. 비슷하게 Strict 모드도 개발 과정에서 발생할 수 있는 잠재적인 문제를 해결하는 데에 도움을 주는 도구입니다. 예를 든다면 잘못된 훅 사용이나 props 전달 등에 대해 경고를 줘서 해결할 수 있도록 돕습니다.
그중 대표적으로는useEffect의 마운트가 2번 실행되는 효과가 있습니다. 마운트-언마운트-마운트의 과정을 거쳐서 개발자가 직접 수동으로 언마운트 해주지 않고도 언마운트를 테스트할 수 있도록 도와줍니다. 가끔 빠른 개발에 방해된다고 Strict 모드를 끄고 개발하시는 분도 계시지만... 저는 얻는 장점이 더 많다고 생각하여 항상 켜고 사용하고 있습니다.
- 답변)
➕
StrictMode에서 지원하지 않는 라이프사이클 메서드
StrictMode는 React에서 레거시로 간주되는 메서드를 감지하고 경고를 제공.
componentWillMount
componentWillUpdate
componentWillReceiveProps
이러한 메서드들은 React 16.3에서 폐지되었으며, StrictMode를 통해 경고를 받아 최신 메서드(componentDidMount, getDerivedStateFromProps 등)로 전환할 수 있다.
useEffect 외 useMemo, useCallback의 동작
- useMemo : 메모이제이션된 값이 두 번 계산될 수 있다. 그러나 반환된 값은 동일하다.
- useCallback : 동일한 이유로 콜백 함수가 두 번 생성될 수 있다.
이 점에서 StrictMode는 메모이제이션과 관련된 불필요한 계산을 확인하고 최적화 기회를 제공한다.
리소스 누출 감지
StrictMode의 핵심 기능 중 하나는 리소스 누출(Resource Leak)을 감지하는 것이다. 예를 들어, 클린업이 제대로 이루어지지 않아 생기는 메모리 누수를 예방 가능하다. 특히 이벤트 리스너, 네트워크 요청, 타이머와 같은 리소스 관리 코드에서 유용하다.
StrictMode의 한계
-
실행 환경
StrictMode는 개발 환경에서만 활성화된다. 프로덕션 빌드에서는 비활성화되므로, 배포 시 코드 실행 순서는 개발 환경과 다를 수 있다. -
경고만 제공
StrictMode는 코드 문제를 자동으로 수정하지 않고, 경고를 바탕으로 개발자가 직접 수정해야 한다.
StrictMode가 적용되지 않는 경우
-
StrictMode는 컴포넌트 트리의 특정 부분에만 적용 가능.
<React.StrictMode>로 감싸지 않은 컴포넌트는 영향받지 않는다. -
이는 점진적으로 코드를 마이그레이션할 때 유용하게 활용할 수 있다.
React 18 이후 StrictMode의 추가 동작
React 18에서는 Concurrent Rendering 도입으로 StrictMode가 더욱 강화되었다. 이로 인해 아래와 같은 추가 동작이 나타날 수 있다.
- React.memo로 래핑된 컴포넌트도 StrictMode에서 두 번 렌더링될 수 있다.
- useId 훅이 초기화 단계에서 StrictMode의 영향을 받아 고유한 ID를 두 번 생성할 수 있다.
특히 useMemo와 useCallback이 두 번 실행되는 것을 명확히 보여주는 코드로 추가 설명을 보완할 수 있다.
🖥️ jsx
import React, { useMemo, useCallback } from "react";
function Example() {
const memoizedValue = useMemo(() => {
console.log("🔄 useMemo 실행");
return Math.random();
}, []);
const memoizedCallback = useCallback(() => {
console.log("🔄 useCallback 실행");
}, []);
return (
<div>
<p>Memoized Value: {memoizedValue}</p>
<button onClick={memoizedCallback}>Click Me</button>
</div>
);
}
export default Example;StrictMode에서 출력 결과
scss
🔄 useMemo 실행 (두 번 실행)
🔄 useCallback 실행 (두 번 실행)이와 같이, useMemo와 useCallback도 StrictMode의 영향을 받아 두 번 실행.
➡️ StrictMode에서 발견한 경고는 모두 수정하는 습관을 들여 더 나은 코드 품질을 보장하도록 한다.
