React Strictmode

pds·2023년 2월 13일

React TIL

TIL

목록 보기

32/60

두 번 동작이 수행되는게 짜증나서 끄고 시작했던 그녀석에 대해 알아보자

React Strict mode

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습는다.

처음에 앱 전체를 감싸게끔 설정되어있지만 어디에서든 선언해 사용할 수 있다고 한다.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

무슨 일을 할까

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

deprecated 된 라이프사이클 메소드를 사용하거나 할 때 이를 알려준다.

그걸 쓸 일이 없다고 생각할 수 있겠지만 외부 라이브러리 같은 것 사용할 때 충분히 마주할 수 있다.

예전에 progress bar 관련 라이브러리를 사용하는데 뜨길래 봤는데 6년전 클래스형 컴포넌트로 구현한 라이브러리였다.

항상 라이브러리를 사용하기 전에는 다운로드 수와 최신 업데이트 날짜, 최근 깃허브 이슈를 확인하자!

import React, { Component } from 'react';

class MyComponent extends Component {
  // deprecated
  componentWillMount() {
    // before the component is mounted
  }
  render() {
    return (
      <div>
      </div>
    );
  }
}

export default MyComponent;

예상치 못한 부작용 검사

리액트에서는

렌더링 단계와

render를 호출해 이전 렌더와 결과를 비교해 변화가 필요한지를 결정하는 단계

커밋 단계

실제 변경사항을 반영하는 단계 componentDidMount / Update

로 나뉘는데 여러번 호출되야 하는 등 복잡한 단계를 거치는 렌더링 단계는

사이드 이펙트가 있으면 치명적이기 때문에 strictmode에서 검사한다고 한다.

모든 사이드이펙트를 찾는 것은 힘들지만 의도적으로 두 번 특정 동작을 호출해

사이드이펙트를 찾게끔 도와주는 것이라고 한다.

어딜 검사할까?

함수형 컴포넌트의 body 부분
useState , useMemo, useReducer에 전달되는 함수

예를 들어 매우 간단하게 이런 식으로 작성해보면

body의 console 부분에 대해 경고를 주는 것이다

function MyComponent() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  console.log('Rendered!');
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default MyComponent;