[React] StrictMode와 UseMemo

주제가 무슨 조합인가 싶죠??

디지털 하나로 React 파트가 끝난 기념으로 주요 컴포넌트 및 훅 총 정리하려구 했는데요,

그 다음 Next 파트에 치여서 딱 저 두 개 밖에 정리를 못 했어요!

 

StrictMode

[무엇인지?]

 

개발 단계에서 버그를 발견할 수 있게 하는 React 특수 컴포넌트이다.

실제 DOM에 포함되는 Node가 아니다.

<StrictMode>
  <App>
    <Header />
    <Content />
  </App>
</StrictMode>

 

이런식으로 다른 컴포넌트를 감싸고 "이 하위는 strict 체크를 켜라" 라는 플래그를 전달합니다.

주로 App.tsx에서 앱 전체를 검사하기 위해 사용되는게 관례이지만, 어디에든 사용할 수 있다.

 

[어떻게 동작하는지?]

 

렌더링을 두 번 한다.

React의 컴포넌트는 순수해야한다. 

순수상이란, 같은 입력을 주었을 때 항상 같은 결과가 나와야한다는 것.

 

이 특징을 고려해서 StrictMode로 렌더링을 두 번한 결과를 서로 비교해서 

다른 값이 나오면 순수성이 깨졌다는 것으로 에러를 내보낸다.

또, 마운트 언마운트가 되는 과정에서 useRef와 useEffect를 unmount 할 때 클린업을 제대로 해줬는지를 확인할 수 있다.

 

[왜 React는 순수함을 신경쓸까?]

 

리액트 공식 문서에 설명되어있는 바로는

1. 성능을 높일 수 있다. 

입력이 변경되지 않았다면 같은 결과라는 전제가 충족되므로, 렌더링을 건너뛰어 성능을 향상시킬 수 이싿.

2. 다른 환경에서 컴포넌트가 실행되었을때에도 같은 결과가 보장된다.

3. 렌더링을 하다가 변경에 의해 새로 렌더링을 해야할때에도, 가차 없이 버리고 렌더링을 시작할 수 있다!

이전 렌더링의 결과가 후에 영향을 주지 않는다는 거니까.

 

UseMemo

재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook이다.

사실 React 버전 업에 따라서 React Compiler가 자동으로 memoization을 수행해주므로 따로 사용할 필요 없다. 

 

[원래는 어떤 의도였는지?]

 

불필요한 리렌더링을 방지하기 위한 훅이다. 

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

 

위와 같이 useMemo 를 사용한 값들은 같은 컴포넌트가 리렌더링되어도 재계산을 생략한다. 

(StrictMode를 위한 렌더링에서는 재계산을 시행한다고 한다.)

 

[주의점]

 

useMemo는 성능을 높이기 위한 용도로 사용해야한다. 

useMemo가 없어서 에러가 나면 그건 잘못된 사용이라는 것이다!

 

react가 언제 캐시된 것들을 지울지 모르기 때문이다. (꼭 필요한 경우가 아니면 지우지 않는다고는 하지만)

해당 훅 안에 사용하기 마땅한 함수는 "여러번 계산되어도 상관 없는데 불필요한 로직"이다!

"반드시 한번만 실행이 되어야 하는 로직" 은 부적합하다.