React - StrictMode

자바스크립트에서는 엄격 모드가 있다. 코드 파일 상단에 "use strict"를 써 놓으면 자바스크립트를 실행할 때 조금 더 엄격하게 코드를 검사한다.

리액트에도 이와 유사한 목적으로 사용하는 라는 컴포넌트가 있다.

"StrictMode는 애플리케이션 내의 잠재적 문제 알아내기 위한 도구입니다. - 리액트 공식문서 > 고급 안내서"

리액트를 가이드라인에 맞추어 사용하는 것이 가장 좋지만 그렇지 않아도 어플리케이션은 그런대로 동작한다. 이런 결과물은 느리고 불안정할 수 밖에 없는데 문제의 원인을 찾는 것이 좀처럼 어렵다.

Strict 모드를 사용하면 리액트가 자식 컴포넌트를 검사하고 잘못 사용된 부분을 우리에게 알려준다. 이런 경고 메세지를 보면서 리액트를 사용하면 어플리케이션에 잠재된 문제를 미리 해결할 수 있을 것이다.

• StrictMode는 개발 모드에서만 활성화 되기에, 빌드가 된 후의 프로젝트에서 StrictMode는 비활성화된다.
• 개발을 진행하는 중 console.log()가 두 번 찍히는 이유는 StrictMode가 활성화되어있기 때문이다.
  - 🔨 다만, react 버전 17 이상에서는 Strict 모드에서도 자동으로 console.log()가 두 번찍히지 않는다.

🧹 검사 항목

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

비동기 React 애플리케이션에서 특정 생명주기 메서드들은 안전하지 않다.
지원 종료(deprecated)한 메서드를 사용하면 경고한다.
Strict 모드가 활성화되면, 안전하지 않은 생명주기 메서드를 사용하는 컴포넌트 목록이 담긴 경고 로그가 출력된다.

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

레거시 문자열 ref API은 여러 단점이 있고, 이러한 단점없이 객체 ref를 사용하는 방법이 있다.

따라서, Strict 모드가 활성화 되었을 때, 레거시 문자열 ref API가 사용되면 경고 로그가 출력된다.

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

컴포넌트 자식 중 특정 엘리먼트를 찾는 함수이다. 자식 엘리먼트는 구현 방식에 따라 달라질 수 있기 때문에 유지보수하기 어려워 사용을 자제한다. 대신 직접 ref를 지정해 사용하라고 권장한다.

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

리액트는 컴포넌트를 렌더링하기 위해 두 단계를 거친다.

렌더링과 커밋.

렌더링 단계에서는 변화를 계산하는 단계이다.
예를 들어 render 함수를 호출해서 이전값과 비교하는 방식이다. 이렇게 계산한 변경을 반영하는 단계가 커밋이다.

렌더링 단계에서 사용하는 메서드는 비교 계산을 위해 여러번 호출될 수 있는데 이 메서드 안에서 부작용을 포함하지 않는 것이 중요하다. 메모리 누수 등 예측하지 못한 문제를 일으킬수 있기 때문이다.

 

 

🛁Strict 모드는 렌더링 단계의 메서드에 부작용이 있는지를 검사한다. 만약 리액트가 경고한다면 부작용 코드를 커밋 단계로 옮기는 것이 좋다. 렌더링 단계에서는 부작용 코드를 여러번 실행할 것이기 때문이다.

참고로 리액트는 Strict 모드에서 렌더링 단계의 메서드를 두 번씩 호출한다. 부작용 문제를 진단할 목적이다.

이중으로 호출되는 함수는 다음과 같다.
클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
클래스 컴포넌트의 getDerivedStateFromProps static 메서드 함수 컴포넌트 바디
State updater 함수 (setState의 첫 번째 인자)
useState, useMemo 그리고 useReducer에 전달되는 함수
🌶 출처 : https://ko.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

5. 레거시 context API 검사

레거시 context API는 오류가 발생하기 쉽기에 Strict 모드에서 사용되면 경고 로그를 출력한다.

새로운 context API를 사용하는 것이 권장된다.
새로운 context API: https://ko.reactjs.org/docs/context.html

---

https://velog.io/@citron03/React%EC%9D%98-StrictMode%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C
https://jeonghwan-kim.github.io/2022/05/20/react-strict-mode