useMemo 사용법

React는 props와 state의 변화에 따라 rendering 되는 특징을 가지고 있다.

그래서
1. 때로는 단순한 state의 변화임에도 불구하고 컴포넌트들이 rerendering 되는 상황이 일어날 수도 있고,
2. 본인 생각대로 props와 state를 바꿨다고 생각했는데도 동작하지 않는 경우도 있다.

1번의 경우는 useMemo를 사용해서 미연의 상황을 방지한다.
다음의 예제를 통해 useMemo가 어떻게 사용되는지를 알아보자.

---

예를 들어 count component를 구성하는 것을 <count />라고 해보자.
그리고 이 <count />를 감싸있고, return 하는 countWrapper component인 <countWrapper />가 있다고 해보자.
(앞으로는 <count />, <countWrapper /> 라고 지칭)

<countWrapper /> 에서는 <count />를 다음과 같이 return 한다.

<count />는 다음과 같이 구성된다.

return (
   <div>
      <div className="real">
         <button onClick={decreseReal}>decrease</button>
         <div>{real_value}</div>
         <button onClick={increaseReal}>increase</button>
      </div>

      <div className="fake">
         <button onClick={decreseFake}>decrease</button>
         <div>{fake_value}</div>
         <button onClick={increaseFake}>increase</button>
      </div>
   </div>
);

하나의 div 내에는
값을 나타내주는 div와
값을 내릴 수 있는 함수를 가지고 있는 decrease button,
값을 올릴 수 있는 함수를 가지고 있는 increase button이 있다.

이렇게 두 쌍의 div가 존재한다.

1. real div : 값을 변화시키는 함수들이 있고, 에서도 값이 변하며, <count /> 로 그 값을 넘겨 주어야 한다.

2. fake_div : 값을 변화시키는 함수들이 있고, 에서도 값이 변하며, <count />로 그 값을 넘겨 주어야 한다.

그리고 <countWrapper />는 다음과 같이 구성된다.

const [real, setReal] = useState(0);
const [fake, setFake] = useState(0);

const decreaseReal = () => {
   const changed = real - 1;
   setReal(changed);
}

const increaseReal = () => {
   const changed = real + 1;
   setReal(changed);
}

const decreaseFake = () => {
   const changed = fake - 1;
   setFake(changed);
}

const increaseFake = () => {
   const changed = fake + 1;
   setFake(changed);
}

real, fake 두 개의 value가 있고, 각 value를 변화시킬 수 있는 네 개의 함수가 있다.
그리고 <count />에 props를 넘겨줘야 하는데, 다음과 같이 넘겨준다.

return (
   <div>
      <count 
         real={real}
         fake={fake}
         decreaseReal={decreaseReal}
         increaseReal={increaseReal}
         decreaseFake={decreaseFake}
         increaseFake={increaseFake}
      />
   </div>
);

이대로 동작시킨다면, real과 fake state의 값이 모두 변하고, 수정된 state에 따라 props도 바뀌기 때문에 <count />는 계속 변하게 된다.

---

그런데 여기서 fake의 값이 변하는 것은 숨기고 싶다면 어떻게 해야할까?
분명 리액트는 state와 props 값의 변화에 따라 컴포넌트들이 리렌더링되는데, 리렌더링을 방지할 수 있을까?

useMemo는 이러한 것을 가능하게 해준다.
하단을 이렇게 구성해주면 된다.

const areEqual = (prevProps, nextProps) => {
	console.log(prevProps);
	return (
		prevProps.real === nextProps.real
	);
};

export default React.memo(ChatRoom, areEqual);

memo는 말그대로 일종의 memo를 통해 값을 기억하고, 불필요한 리렌더링이 발생하지 않도록 해준다. 위에서는 real의 값이 같다는 것만 체크를 해주는 것을 볼 수 있다.
따라서 real state의 변화에 따라서만 <count /> 컴포넌트가 리렌더링되므로, fake를 아무리 눌러도 <count />는 변하지 않게 된다.