렌더링 최적화, 컴포넌트 최적화를 위한 Hook으로 useMemo(), useCallBack()이 있다.

useMemo가 언제 필요할까?

아래의 코드에서 calculate() 는 복잡한 연산을 해야하는 함수이고, 값을 반환하는 데 몇 초 이상이 걸린다고 가정해보자.

대부분의 React 컴포넌트는 state와 props의 변화로 인해 수많은 렌더링을 거치는데,
이때, 컴포넌트가 렌더링된다는 것은 함수 내부의 모든 변수가 초기화된다는 것을 의미한다.

그렇다면 Calculator 컴포넌트는 렌더링될 때마다 calculate() 함수를 호출하고, 변수 result에 값을 할당해주는 것을 매번 수행한다는 것을 의미한다.
즉, 컴포넌트 렌더링이 발생할 때마다 매번 몇 초 이상의 시간이 소요될 것이고, 이는 매우 비효율적이다.

function Calculator({ value }) {   // props로 value를 받는다.
  const result = calculate(value); // 매우 복잡한 연산을 수행하는 함수
  
  return (
    <>
      <div>{result}</div>
    </>
  );
}

➡️ 이때, useMemo() Hook을 사용하면, 이전에 구축된 렌더링과 새롭게 구축된 렌더링을 비교하여 value 값이 동일할 경우, 연산을 또 다시 수행하지 않고 이전 렌더링의 value 값을 그대로 활용할 수 있게 한다.

• useMemo()는 메모이제이션(Memoization) 개념을 활용해 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화시킨다.
• 직접 메모이제이션 개념을 이용해 로직을 구현해도 되지만, useMemo() Hook을 호출해 이용하면 훨씬 간편하다.

메모이제이션(Memoization)

: 기존에 수행한 연산의 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

메모이제이션을 적절히 활용하면, 중복 연산을 할 필요가 없어지기 때문에 앱의 성능을 최적화할 수 있다.

---

useMemo()

: 메모이제이션된 값을 반환하는 Hook

useMemo(() => {}, []) : 첫 번째 인자로 콜백 함수, 두 번째 인자로 종속성 배열을 갖는다.

1. 함수

콜백 함수는 메모이제이션할 값을 리턴해주는 함수이며,
이 함수가 리턴하는 값이 곧 useMemo()가 리턴해주는 값이 된다.

2. 종속성 배열(dependency array)

useMemo()는 종속성 배열 안에 있는 요소의 값이 업데이트될 때만 콜백 함수를 호출하고, 메모이제이션된 값을 업데이트 한다.

• 만약 빈 배열이라면, 맨 처음 컴포넌트가 마운트되었을 때만 값을 저장하고, 이후에는 항상 메모이제이션된 값을 꺼내와서 사용한다.
• 배열이 없는 경우, 매 렌더링마다 새로운 값을 계산한다.

import { useMemo } from "react";

function Calculator({ value }) {
  const result = useMemo(() => calculate(value), [value]);
  // 컴포넌트가 리렌더링되어도, value값이 동일하다면 연산을 수행하지 않고 이전 값을 그대로 사용한다.
  
  return (
    <>
      <div>{result}</div>
    </>
  );
}

---

예제)

아래 코드에서 콘솔창을 열고 아래 계산기와 상관 없는 버튼을 클릭해보면,
컴포넌트 전체 리렌더링이 일어나며 불필요하게 add() 함수가 실행되는 것을 볼 수 있다.

⬇️
add() 함수에 useMemo()를 사용해보면...
아래 계산기와 상관 없는 버튼을 눌러서 컴포넌트 전체 리렌더링이 일어나더라도, val1, val2값이 업데이트 되지 않았으므로 add() 함수는 실행되지 않는다. 👍

---

useMemo()는 콜백 함수가 리턴한 값을 메모이제이션하는 Hook이라면, useCallback()은 콜백 함수 자체를 메모이제이션하는 Hook이다.

useCallback()

: 메모이제이션된 콜백을 반환하는 Hook

useCallback(() => {}, []) : 첫 번째 인자로 콜백 함수, 두 번째 인자로 종속성 배열을 갖는다.

1. 함수

앞서 React에서 컴포넌트가 렌더링된다는 것은 함수 내부의 모든 변수가 초기화되는 것이라고 설명했다.
JavaScript에서 함수는 객체의 한 종류로, 함수가 객체이기 때문에 변수에 할당할 수 있는 것이다.

아래의 코드에서 만약 컴포넌트 리렌더링이 발생하면, double이라는 변수에 할당된 함수 객체 또한 초기화된다.
그리고, 새로운 함수 객체가 생성되어 다시 double이라는 변수에 할당되는 것이다.
즉, 렌더링될 때마다 매번 새로운 함수 객체가 할당된다.

const double = (num) => {
  return num * 2;
};

이때, useCallback()을 사용해서 함수 객체를 메모이제이션해주면, 컴포넌트가 리렌더링되어도 변수 double이 초기화되는 것을 막고, 메모이제이션된 함수를 다시 사용할 수 있게 한다.

const double = useCallback((num) => {
  return num * 2;
}, [value]);

2. 종속성 배열(dependency array)

이렇게 메모이제이션 된 함수는 종속성 배열 안에 있는 요소의 값이 변경되지 않는 이상 다시 초기화되지 않고, 변경되었을 때만 새롭게 할당된다.

---

useCallback이 언제 필요할까?

자식 컴포넌트에 props로 함수를 전달해줄 때 useCallback()을 사용하면, 부모 컴포넌트가 리렌더링될 때마다 같은 값을 리턴하는 함수를 불필요하게 호출하는 것을 막을 수 있다.

예제)

1. 아래 코드에서 수량을 변경하면, quantity 상태가 업데이트 되며 컴포넌트 리렌더링이 일어난다.
2. 컴포넌트가 리렌더링되며, 컴포넌트 내부의 getItems() 함수가 새롭게 만들어진다.
3. ItemList 컴포넌트 안의 useEffect는 종속성 배열 안에 getItems를 가지고 있으므로, getItems() 함수를 호출한다.

문제는 아래 장바구니와 상관 없는 버튼을 눌렀을 때도 컴포넌트 전체 리렌더링이 일어나며 불필요하게 getItems() 함수가 실행된다는 점이다.

⬇️
getItems() 함수에 useCallback()를 사용해보면...
아래 장바구니와 상관 없는 버튼을 눌러서 컴포넌트 전체 리렌더링이 일어나더라도, getItems() 함수는 quantity 값이 업데이트 되지 않는 한 실행되지 않는다. 👍

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://youtu.be/e-CnI8Q5RY4
https://youtu.be/XfUF9qLa3mU