[짤막글] react strict 모드란??

안녕하세요. 김용성입니다.
오늘은 react 개발 시에 strict모드가 무엇인지에 대해 설명드리고자 합니다.
오늘은 아주 짧게 개념만 설명드리도록 할께요!

strict 모드

예전에 react를 처음 접할 때에는 npx create-react-app 명령어를 통해서 react 프로젝트를 생성시키곤 했습니다. 현재는 저 명령어를 사용하지 않고, webpack을 이용해서 react 프로젝트를 만들고 실행하는데, npx 명령어를 사용하여 react 앱을 생성하면 자동으로 strict 모드라는 것이 설정된다는 것 혹시 알고계셨나요?

npx 명령어를 통해 react 프로젝트를 생성한 후 index.js 파일을 살펴보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode> 
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App 태그를 감싸고 있는 저 녀석, 저 녀석이 바로 react의 strict 모드입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render( 
    <App />
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이런 식으로 해당 strict 모드 태그를 삭제하고 프로젝트를 실행해도 별다른 문제가 생기지 않습니다.
그렇다면 저 strict는 어떤 것이고, 왜 있는걸까? strict 모드가 야기하는 현상에는 어떠한 것이 있는가에 대해 여러분들에게 설명드리겠습니다.

react의 공식 문서에서 살펴보면 strict 모드란 react 앱 내의 잠재적인 문제를 알아내기 위한 도구라고 나와있습니다.

우선 strict 모드는 개발 과정 중에만 적용이 됩니다. 배포가 되고나면 strict 모드는 저절로 작동하지 않기 때문에 걱정하지 않으셔도 됩니다! 그 점을 알아두시고 strict 모드의 기능에 대해 알아가시면 좋을 것 같네요.

안전하지 않은 것들에 대한 경고

리액트는 렌더링 단계와 커밋 단계 두가지의 단계로 동작합니다.
렌더링 단계는 render 함수를 호출해서 이전 렌더와 비교를 수행하는 단계이고, 커밋 단계의 경우에는 라이프 사이클 함수를 실행시키며 DOM 노드를 추가/변경해주는 단계입니다. 여기서 커밋단계는 일반적으로 렌더링 단계보다 빠릅니다.
그로인해 느린 렌더링 단계에서 여러 생명주기 메서드가 여러번 호출되기도 합니다. 이러한 것들을 strict 모드에서는 미리 파악하고 우리에게 경고해줍니다. 보통 class component의 생명 주기 메소드인 componentWillMount()나 componentWillUpdate() 등에서 이런 형태가 나타나지만 setState에서 역시 이러한 현상들이 나타납니다. 당연히 setState와 같은 기능으로 사용되는 useState에서도 이러한 현상이 나타나는 경우가 있습니다.
이러한 메서드들은 여러 번 호출될 수 있기 때문에 원하는 결과값을 보존하기 위해서 미리 잡아야 합니다. 그럴 때 우리가 Strict 모드를 통해 2번 수행되는 메서드들을 잡아 미리 고칠 수가 있는 것입니다. 물론 Strict 모드가 자동적으로 모든 부작용을 찾아낼 수는 없지만, 문제가 될 만한 함수를 두 번 실행하는 방법으로써 이러한 발견을 도와줍니다. 즉 Double-Invoke 방식을 통해 이를 우리에게 알려주는 것이죠.

만약 double invoke가 실행되었을 때 두개의 결과 값이 서로 다르다면? 해당 코드는 문제가 있다는 뜻이 됩니다.

또한 공홈에서 제공하기로는 strict 모드가 다음과 같은 문제점들을 발견해준다고 합니다. 한번 읽어보시는 것을 추천드립니다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

출처 react 공홈-Strict mode

주로 double-invoked가 발생하는 함수

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

흠...

그런데 제가 분명히 지난번에 useState를 사용할 때 double-invoked가 발생하는 것을 발견했었는데, 오늘 포스팅을 위해 새로 프로젝트를 만들고 해당 코드를 동작하였을 때에는 또 double-invoked가 발생하지 않는군요.. 이 점은 제가 조금 더 분석해보도록 하겠습니다...😂😂

마무리

여러분들이 strict 모드를 on 해놓은 채 프로젝트를 진행하다보면, 언젠가 double-invoked 관련한 문제를 마주할 수 있습니다. 그렇다면 혹시 react strict 모드가 설정되어있는지에 대해 한번 확인해보시는건 어떨까요🤗?

오늘 포스팅은 좀 알맹이가 없는 느낌이네요.. 예제 코드를 만들다가 실패해서 만족스럽지 못합니다. 제가 추후에 Strict 모드로 인한 Double-invoked 문제를 발견하게 되면 예제코드를 추가시켜 여러분들의 이해를 돕도록 하겠습니다...