useMemo, React.memo

✅ useMemo

👉 Memoization

Memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.
적절하게 활용하면 중복연산을 피할 수 있기때문에 애플리케이션의 성능을 최적화 할 수 있다.

✍️ useMemo란?

useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용되는 훅이고, 메모이제이션된 값을 반환하는 함수이다.

const value = useMemo(() => fn, [deps])

여기서 의존성배열의 값이 변하게 된다면 함수를 실행하고, 그 함수의 반환 값을 반환해준다.

⁇ useMemo를 사용하는 이유는?

컴포넌트는 state가 변경될때마다 렌더링되는데, 이때마다 다른 함수가 불필요하게 재호출된다면 매우 비효율적일 것이다.
때문에 useMemo 훅을 사용하여 렌더링 -> 컴포넌트 함수 호출 -> memoize된 함수 재사용하는 순서를 거친다.

리렌더링이 발생할 경우 특정 변수가 변할때만 ussMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게 된다.

---

✅ React.memo

React.memo는 Highter-Oredr Component(HOC) = 고차 컴포넌트이다.

👉 고차 컴포넌트

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컨포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

const NewComponent = higherOrderComponent(WrappedComponent);

일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면에 고차 컴포넌트는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다.

또 React.memo는 아래와 같은 꼭 필요한 상황에서만 사용한다.

• 컴포넌트가 같은 props로 자주 렌더링 될때
• 컴포넌트가 렌더링 될때마다 복잡한 로직을 처리해야 될때

✍️ React.memo의 사용법

1️⃣ 얕은 비교

const MyComponent = React.memo((props) => {
	return (/*컴포넌트 렌더링 코드*/)}
);

const TextView = React.memo( ({text}) =>{
    useEffect(()=>{
        console.log(`UpdateText :: Text : ${text}`)
    })
    return <div>{text}</div>
});

const CountView = React.memo( ({count}) =>{
    useEffect(()=>{
        console.log(`UpdateCount :: Count : ${count}`)
    })
    return <div>{count}</div>
});

• React.memo는 props에 변화가 일어날때만 영향을 준다.
• React.memo(리렌더링이 일어나지 않았으면 하는 컴포넌트)를 입력하면 props가 변화하지않고, 반화되지 않은 고차컴포넌트를 돌려준다. 물론 자기 자신의 state가 바뀌면 리렌더링이 일어난다)
• props 혹은 props의 객체를 비교할때 얕은비교를 한다.

[React공식문서]
props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작입니다. 다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교 함수를 제공하면 됩니다.

2️⃣ 깊은 비교

const areEqual = (prevProps, nextProps) =>{
 return true;  // 이전 props와 현재 props가 같다 = 리렌더링 x
 return false; // 이전 props와 현재 Props가 다르다 = 리렌더링 o
}

---

이러한 상황에서 CountView가 업데이트되면 CountView와 TextView 모두 리렌더링 된다. CountView만 업데이트시키고 TextView를 업데이트 시키지 않고 싶을때는 useMemo 와 React.memo를 사용해주면 된다!