Strict Mode
리액트 프로젝트를 초기 생성하면 이렇게 main 파일에 App이 StrictMode로 감싸져 있는 것을 확인할 수 있다. 또, 개발을 하다보면 console에 log가 두 번씩 찍히는 경우가 있는데, 그 범인이 바로 이 StrictMode다.
React 공식문서에 따르면, StrictMode는 개발 초기에 컴포넌트의 일반적인 버그를 찾을 수 있게 해준다고 한다.
<StrictMode>lets you find common bugs in your components early during development.
주요 기능은 크게 4가지로 나눌 수 있다.
- 컴포넌트 이중 렌더링
- useEffect 재실행
- Ref 콜백 재실행
- 레거시 API 사용 확인
1. 컴포넌트 이중 렌더링
개발환경에서 컴포넌트를 의도적으로 두 번 렌더링
React는 작성하는 모든 컴포넌트가 항상 동일한 입력에 대해 동일한 JSX를 반환(순수 함수)해야 한다고 가정한다.
이에 따라, 컴포넌트 함수 body(오직 최상위 로직), useState, set 함수, useMemo, useReducer 그리고 constructor, render, shouldComponentUpdate와 같은 클래스 컴포넌트를 개발 환경에서 두번 call한다.
순수 함수는 항상 같은 결과를 생성하므로, 여러번 호출해도 같은 결과가 나온다. (하지만 받은 데이터를 변경하는 등) 순수하지 않은 함수는 다른 결과가 나오기 때문에, 두 번 실행하여 검사를 하는 것이다!
순수하지 않은 경우
- 동일한 props/state 입력에 대해 다른 출력을 생성하는 렌더링
- 외부 상태 변경에 의존하는 렌더링
- 사이드 이펙트를 포함하는 렌더링 (예: DOM 직접 조작) 등 순수하지 않은 렌더링
2. Effect 생명주기 관리
개발 환경에서 모든 useEffect를 두 번 실행
React는 컴포넌트가 마운트될 때 setup을 호출하고 컴포넌트가 마운트 해제될 때 cleanup을 호출한다. 그런 다음 의존성이 변경되면, cleanup과 setup을 다시 호출한다.
Effect는 외부 시스템과의 동기화를 담당하므로 정확한 타이밍에 리소스 해제가 필요하다.
의존성 변경 시 이전 상태 클린업이 필수이며, 셋업과 클린업 로직이 올바르게 구현되어야 한다.
클린업 로직이 제대로 구현되어 있는 경우, 재실행했을 때, 이전 상태가 정리되지 않은 채로 남아있는 것을 확인할 수 있다!
즉, StrictMode는 useEffect를 한 번 더 실행함으로써, 클린업 로직이 제대로 구현되었는지 즉시 확인할 수 있다.
3. Ref 관리 무결성 검사
개발 환경에서 모든 ref 콜백을 두 번 실행
Strict Mode는 ref 콜백도 두 번 실행하여, ref의 설정과 정리가 올바르게 구현되었는지 확인한다.
이 때, 첫 번째는 null을 인자로, 두 번째는 실제 DOM 요소를 인자로 전달한다.
첫 번째 호출 (Cleanup 단계)
- ref 콜백에 null이 전달됨
- 이전 ref에 대한 정리 작업을 수행할 기회를 제공
- 리소스 해제, 이벤트 리스너 제거 등의 정리 작업 수행
두 번째 호출 (Setup 단계)
- ref 콜백에 실제 DOM 노드가 전달됨
- 새로운 ref에 대한 설정 작업 수행
- DOM 조작, 포커스 설정, 초기화 등의 작업 수행
이러한 이중 실행은 아래와 같은 상황에서 발생할 수 있는 버그를 조기에 발견하는 데 도움이 된다!
- DOM 참조가 제대로 정리되지 않는 경우
- 이벤트 리스너가 중복 등록되는 경우
- 메모리 누수가 발생하는 경우
- ref 관련 사이드 이펙트가 제대로 처리되지 않는 경우
4. 레거시 API 사용 확인
<StrictMode>트리 내부에서, 더이상 권장되지 않는 API를 사용하는 경우, 이를 감지하여 경고
- UNSAFEcomponentWillMount와 같은 UNSAFE 클래스 생명주기 메서드
개발자가 더 이상 권장되지 않는 API를 사용하면, 콘솔에 경고가 표시되고, 새로운 대체 API를 사용하도록 권장한다.
결론
<StrictMode>는 React 애플리케이션의 잠재적인 버그와 문제점을 개발 초기에 발견하고 해결할 수 있게 해주는 개발 도구이다. 또한, 개발 모드에서만 두 번씩 실행하기 때문에, 실제 프로덕션 환경의 성능에는 영향을 미치지 않는다.
