[React] StrictMode

안녕하세요:) 웹 파트 YB 유서연입니다!

 

이번 글에서는 리액트의 StrictMode에 대해 알아보겠습니다.

---

Strict Mode

 

과제를 하다보면 디버깅을 위해 콘솔을 찍어보는 경우가 많을 텐데요.

이때, 위 사진처럼 console.log()를 한 번만 실행했음에도 불구하고 두 번 씩 찍히는 걸 본 적이 있을 겁니다.

이처럼 렌더링이 두 번 발생하는 이유는 index.jsx(main.jsx) 파일에서 React.StrictMode가 동작하기 때문입니다.

 

 

그렇다면 왜 StrictMode를 작동시키는 걸까요?

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 

Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.

이때, StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

 

 

Strict Mode의 검사 항목

StrictMode가 활성화되면 다음과 같은 문제들을 검사합니다.

1. 안전하지 않은 생명 주기를 사용하는 컴포넌트 식별

특정 생명주기 메서드들은 비동기 애플리케이션에서 사용하기에 안전하지 않습니다.

StrictMode가 활성화되면 리액트는 안전하지 않은 생명주기 메서드를 사용하는 컴포넌트 목록을 정리해 경고 로그를 띄웁니다.

2. 레거시 문자열 ref 사용에 대한 경고

이전에는 리액트에서 ref를 관리하는 두 가지 방법으로 문자열 ref API와 콜백 ref를 제공하였는데요.

문자열 ref의 단점들 때문에, 현재는 콜백 ref를 사용하는 것을 권장하고 있습니다.

따라서 StrictMode가 활성화 되었을 때, 레거시 문자열 ref를 사용하면 경고 로그를 띄웁니다.

3. 권장되지 않는 findDOMNode 사용에 대한 경고

이전에는 리액트에서 findDOMNode를 사용해 DOM 노드를 찾을 수 있는 방식을 지원하였지만,

현재는 DOM노드에 직접 ref를 지정할 수 있습니다.

따라서, StrictMode는 findDOMNode가 사용되는 것을 방지합니다.

4. 예상치 못한 부작용 검사

• constructor
• componentWillMount (or UNSAFE_componentWillMount)
• componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
• componentWillUpdate (or UNSAFE_componentWillUpdate)
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setState 업데이트 함수 (첫 번째 인자)

위의 메서드들은 여러 번 호출될 수 있기에, 부작용이 없는 것이 중요합니다.

StrictMode는 아래의 함수들을 의도적으로 여러 번 호출해 부작용을 검사합니다.

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수

5. 레거시 context API 검사

리액트의 레거시 context API는 오류가 발생하기 쉽기 때문에 StrictMode에서 이를 검사해 경고 로그를 띄웁니다.

6. 재사용 가능한 상태 보장

React 18은 StrictMode에서의 새로운 development mode check를 도입해

마운트 해제 전 사용된 컴포넌트 상태를 사용해서 트리를 다시 마운트하는 것을 지원하고 있습니다.

 

 

 

https://ko.legacy.reactjs.org/docs/strict-mode.html