react memoization 1 ) 왜 최적화 툴이 필요한가?

최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고
좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다.

 

일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까?

 

최적화 툴이 만들어진 이유는 다음과 같다.

리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자!

 

The Basic rule

•  모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다.
• 따라서 상위 컴포넌트가 변경되면 모든 하위의 컴포넌트도 재렌더링됩니다.

여기서 많은 사람들이 오해하는 부분이 있다.

나 또한 잘못알고 있었고, 리렌더링 자료를 찾다보면 리렌더링 되는 조건을 종종 발견할 수 있다.

 

 props가 변경되면 컴포넌트는 리렌더링 된다!  => false

 

반례를 하나 봅시다.

function Counter() {
  const [count, setCount] = React.useState(0);
  
  return (
    <main>
      <BigCountNumber count={count} />
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Decoration />
    </main>
  );
}

Decoration component는 count에 어떠한 영향도 받지 않지만, count상태가 변경됨에 따라 재렌더링됩니다.

 

상태가 변경여부가 관계없이 리렌더링이 됩니다.. 리액트 팀은 왜 리렌더링이 되도록 해야했을까요?

⇒ 리액도팀 100%확실할 수 없기 때문입니다. (사용자들이 제대로 이해하고 사용한다고 장담하기 어렵죠...그게 접니다.. )

 

우리는 항상 pure한 리액트 컴포넌트(같은 props를 넣으면 값은 UI가 생성이되는)를 만들고 싶습니다!

하지만 현실세계에서는 impure한 컴포넌트를 만들기 무진장 쉽습니다!

 

아래 코드처럼요!

function CurrentTime() {
  const now = new Date();

  return (
    <p>It is currently {now.toString()}</p>
  );
}

리액트팀의 첫번째 목표는 사용자의 UI가 state에 따라 동기화 되는지입니다.

따라서 사용자에게 오래된 UI를 보여주기보다는 불필요한 리렌터링하는 것을 선택한것이지요!

따라서 props와 rerender링은 상관이 없습니다!

우리는 상태값이 변경하면 해당 컴포넌트를 리렌더링하고 이는 트리 아래로 종속되어 리렌더링 되는 것일 뿐입니다!

 

리액트가 이런 허용을 했을때는 이를 최적화 할 수 있는 툴도 만들었을겁니다.

 

(우리는 일단 사용자 UI가 fresh한 것이 목적이니, 너희가 리액트의 cycle에 대해 이해하게 된다면, 직접 우리가 제공하는 툴을 통해 최적화를 시켜!)   이런의도가 아니었을까요? 감히 추측해봅니다...

 

이것이 React.memo, useMemo, useCallback이며 왜 배워야하는지도 조금은 명확해졌습니다.

 

다음 글은 React.memo를 왜 사용하는지, 어떻게 사용하는지에 대해서 알아보겠습니다.