import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
리액트로 프로젝트를 진행하다보면 무조건 알아야될 가장 기초적인 개념이라고 할 수 있는데, <React.StrictMode>은 무슨 역할을 하는 것이길래 항상 따라오는 것일까?
React.StrictMode
대부분 처음엔 이 코드의 존재를 모르고 있다가 useEffect 훅을 사용하다 console.log() 를 찍어보고 나서야 두번 호출되는 것을 확인하고 '어, 이거 왜 이러지?' 하고 해결법을 찾다가 발견하게 되는 경우가 많다.
(React 버전이 17 이상이면 두번 찍히지 않는다.)
<React.StrictMode> 란, 리액트 공식 문서에 따르면 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이며, Fragment와 같이 UI를 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화 한다고 한다. 그리고 <React.StrictMode> 는 개발 모드에서만 활성화 되기 때문에, 프로덕션 빌드에서는 영향을 끼치지 않는다고 한다.
잠재적인 문제를 해결한다고 하는데, 잠재적인 문제에는 어떤 것들이 있을까?
잠재적인 문제
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
안전하지 않은 생명주기를 사용하는 컴포넌트 발견
비동기 React 애플리케이션에서 특정 생명주기 메서드들은 안전하지 않다. Strict 모드가 활성화되면, 안전하지 않은 생명주기 메서드를 사용하는 컴포넌트 목록이 담긴 경고 로그가 출력되게된다.
레거시 문자열 ref 사용에 대한 경고
레거시 문자열 ref API는 여러 단점이 있고, 이러한 단점없이 객체 ref를 사용하는 방법이 있다. 따라서 Strict 모드가 활성화 되었을 때, 레거시 문자열 ref API가 사용되면 경고 로그가 출력된다.
권장되지 않는 findDOMNode 사용에 대한 경고
findDOMNode는 변하지 않는 단일 DOM에서만 정상적으로 작동한다. 리액트와 같이 렌더링이 자주 일어날 수 있는 환경에서 findDOMNode는 변경사항에 대응할 방법이 없으므로 적절하지 않다. ref 객체를 사용하는 방법을 대신 사용할 수 있다.
예상치 못한 부작용 검사
React는 렌더링 단계(변경사항 탐지)와 커밋 단계(실제 변경사항 반영)로 나뉘어진다. 커밋 단계는 빠르게 진행되나, 렌더링 단계는 느릴 수 있다. 렌더링 단계의 여러 생명주기 메서드들이 여러번 호출될 수 있기에, 메모리 누수와 같은 부작용이 없는 것이 중요하다. Strict 모드가 모든 부작용을 자동으로 찾아줄 수는 없다. 하지만, 일부 함수를 이중으로 호출하여 부작용을 예측하고 문제가 되는 부분을 찾을 수 있게 돕는다.
이중으로 호출되는 함수로는 다음과 같다.
- 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
- 클래스 컴포넌트의 getDerivedStateFromProps static 메서드 함수 컴포넌트 바디
- State updater 함수 (setState의 첫번째 인자)
- useState, useMemo 그리고 useReducer에 전달되는 함수
레거시 context API 검사
레거시 context API는 오류가 발생하기 쉽기 때문에 Strict 모드에서 사용되면 경고 로그를 출력한다.
새로운 context API를 사용하는 것이 권장된다.
