React #5 memo

react의 memo 기능.

 

이 전에도 반복해서 공부했듯이

state의 값이 변할 때마다 전체를 랜더링 한다.

 

예시 사이트로 카운트 사이트가 있을 때

플러스 버튼을 누르면 숫자가 올라간다고 하면

숫자가 올라갈 때마다 저장된 state의 값이 변경되기 때문에

계속해서 리랜더링이 되는 건데 이런 경우

memo 기능이 도움을 준다.

 

memo의 기능을 살펴봤을 때 아래처럼 memo로 감싸서 사용할 수 있는데

 

const Counter = memo(function Counter({ initialCount }) {
  log('<Counter /> rendered', 1);
  const initialCountIsPrime = isPrime(initialCount);

  const [counter, setCounter] = useState(initialCount);

  function handleDecrement() {
    setCounter((prevCounter) => prevCounter - 1);
  }

  function handleIncrement() {
    setCounter((prevCounter) => prevCounter + 1);
  }

  return (
    <section className='counter'>
      <p className='counter-info'>
        The initial counter value was <strong>{initialCount}</strong>. It{' '}
        <strong>is {initialCountIsPrime ? 'a' : 'not a'}</strong> prime number.
      </p>
      <p>
        <IconButton icon={MinusIcon} onClick={handleDecrement}>
          Decrement
        </IconButton>
        <CounterOutput value={counter} />
        <IconButton icon={PlusIcon} onClick={handleIncrement}>
          Increment
        </IconButton>
      </p>
    </section>
  );
});

export default Counter;

 

여기서 중요한 점은 memo 안의 내용의 변화에 반응하는 것이 아니라

부모로부터 받은 prob의 변화에 대해서만 반응한다 즉 여기서는 initialCount에 반응한다.

memo가 부모로 받은 prob의 old 값과 지금의 값을 비교하여 변화가 있을 경우에만 랜더링을 시켜준다.

 

그러면 이 memo로 전체를 다 감싸버리면 효율적이게 되는가? 에 대한 의심이 생긴다.

하지만 no 다. memo로 그 값의 변화 유무를 따지는 거 조차 성능에 영향을 준다. 특히, 함수를 감쌀 때

성능에 영향을 많이 준다. 그러므로 memo를 신경 써서 사용해야 하는데, 지금과 같은 카운팅 하는 앱 자체는

워낙 사이즈도 작고 로직도 간단해서 memo 없이 해도 전혀 문제가 생기지 않지만

 

사이즈가 커지고 로직이 복잡해져서 랜더링을 하는 거조차 성능에 무리를 줄 수 있다면

memo를 고려해 보고 사용할 수 있다.

 

결론적으로 꼭 사용하고 싶다면

가장 상위 컴포넌트 트리에 있는 컴포넌트와 리-렌더링을 방지할 수 있는 컴포넌트에 적절하게 사용해야 한다.