평소에 공부는 해놨지만 큰 프로젝트를 하지않아 렌더링 최적화에 크게 신경쓰지 않았다.

지금 하는 블로그 프로젝트도 다른 대형 프로젝트에 비하면 크게 렌더링에 악영향을 주진 않지만 state가 복잡해지고 Component수도 많아진만큼 최적화를 해주는 것은 앞으로의 좋은 습관이 될 것 같아 최적화에 대하여 다시 되짚고 가보고자 한다.

Memoizing

Memoization이란 기존에 있던 값(함수,객체 등)을 사용하여 비용을 줄일 수 있는 최적화기술이다.

같은 input이 들어왔을 때 새롭게 만드는 것이 아닌 기존에 있던 값을 사용한다.
caching과 비슷하지만 memoization은 최적화에 초점을 맞추고 있다.

useCallback, useMemo , React.memo은 memoization의 개념과 비슷하다.

기존에 있던 함수,값,컴포넌트들이 바뀌지않는다면 이전에 있던 값을 사용하는 것이다.

하나씩 차례차례 알아보도록 하자.

---

useCallback

useCallback을 보기전에 다음 예제를 살펴보자.

function factory() {
  return (a, b) => a + b;
}
const sum1 = factory();
const sum2 = factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => true

factory라는 함수가 만들어내는 sum1,sum2은 같은 함수로부터 반환된 함수이지만 비교를 해봤을 때 다른 함수로 판단되고 있다.

이는 자바스크립트 객체의 개념을 들여다봐야한다.

위 예제를 이해하기위해 알아야할 개념은 다음과 같다.
1. 함수는 일급객체이다.즉, 함수도 객체이다.
2. 두 객체를 생성했을 때, key,value값이 같아도 두 객체는 다른 객체이다.

const obj1 = { x: 1, y: 2 };
const obj2 = { x: 1, y: 2 };

console.log(obj1 === obj2); //false

1번 사항을 설명하자면 javascript의 값들은 대부분 객체로 이루어져있다.
함수 또한 객체라고 알고 있으면 된다.

2번 사항은 위 예제를 보면 알 수 있듯이 두 개는 key,value값이 같은데도 비교를 해봤을 때 다른 객체라는 것을 볼 수 있다.

이는 내부적으로 어떠한 생성된 객체는 다른 객체와 다른 고유한 값이라는 것이다.

추가 설명 : 객체 리터럴은 평가될 때마다 객체를 생성한다. obj1과 obj2의 내용은 같지만 다른 메모리에 저장된 별개의 객체이다. 즉 ,obj1과 obj2의 참조 값은 전혀 다른 값이다.

따라서 처음에 본 예제를 다시 살펴보면 sum1()함수와 sum2()함수가 다르다는 것을 이해할 수 있다.

그렇다면 다음으로 React의 예제를 살펴보자.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const changeValue = (e) => setValue(e.target.value);

  return (
    <div>
      <input value={value} onChange={changeValue} />
    </div>
  );
};

export default App;

위 예제에서 input이 onChange이벤트가 발생할 때마다 changeValue 함수가 새로 생성되고 있다.

onChange가 발생할 때마다 생성되는 changeValue는 같은 함수일까? 다른 함수일까?

내부적으로 다른 함수객체이다.

하지만 이벤트가 발생할 때마다 생성되는 함수는 같은 구조를 반환하는 함수이다.

때문에 처음 한번 생성한 함수를 계속 사용해도 된다는 이야기이다.

이럴 때 useCallback을 사용하면 되는 것이다.

useCallback

import React, { useState, useCallback } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const changeValue = useCallback((e) => setValue(e.target.value), []);

  return (
    <div>
      <input value={value} onChange={changeValue} />
    </div>
  );
};

export default App;

위와 같이 useCallback을 해당 함수에 사용해주면 onChange 이벤트가 발생할 때 한번 changeValue 함수가 생성되고 그 뒤로 changeValue를 새로 생성하지 않는다.

여기서 헷갈리지 않아야하는점이 함수가 새로 생성되지 않는다는 것이 함수가 작동하지 않는다는 것이 아니다. 단지 기존에 처음 만들었던 함수를 기억하여 계속 사용하는 것이다.

useCallback의 형태
useCallback(callbackFuncition,[dependency])

useCallback은 useEffect와 비슷한 형태이다.

첫번째 인자에는 실행하고자 하는 함수를 할당하고 두번째 인자인 dependency 배열에 할당하는 value의 변화가 일어날 때마다 callbackFunction을 생성해준다.

하지만 주의할 것은 모든 함수에 useCallback을 wrapping하는 것은 고려해봐야할 상황일 수 있다.

때로는 useCallback으로 wrapping한 함수를 정의하는 것이 렌더링될 때마다 불러지는 것이 비용이 더 클 수 있다.

리액트 공식문서에서도 렌더링할 때 재생성되는 값의 비용이 클 때 사용하라고 나와있다.

따라서 컴포넌트 구조가 복잡하지않고 element들이 복잡하지 않다면 useCallback 차라리 쓰지 않는 것이 나을 수 있다.

때문에 useCallback을 사용할 때 비용측면을 고려해보고 사용하도록 하자.

---

useMemo

useMemo는 useCallback과 비슷하다.
useCallback은 Memoized function을 반환하지만
useMemo는 Memoized value를 반환해준다.

먼저 다음 예제를 살펴보자.

import React, { useState } from "react";

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

export default App;

버튼을 누를 때마다 Todo를 추가해주는 UI와 버튼을 누를 때마다 숫자를 1씩 증가시켜주는 UI가 있다.

이 때 숫자를 증가시켜주는 UI의 버튼을 누르면 10억번이나 계산을 하는expensiveCalculation 함수가 호출된다.

하지만 위 App 컴포넌트는 todos라는 state가 변경되도 리렌더링이 되기 때문에 Todo UI Button을 클릭하여도 expensiveCalculation 함수가 호출이 된다.

이는 성능에 안 좋은 영향을 미치는 요소이기 때문에 최적화가 필요하다.
이 때 필요한 훅이 useMemo이다.

위 예제에 useMemo를 적용해보자.

import React, { useState ,useMemo} from "react";

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);
  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};

export default App;

위와 같이 적용해준다며 todo UI 버튼이 클릭되어도 expensiveCalculation이 호출되지 않는다.

useMemo의 형태
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback과 비슷하게 첫번째 인자에는 콜백함수를 할당해주고 두번째인자에는 dependency배열을 할당해준다.

dependency값이 바뀌지 않으면 computeExpensiveValue는 호출되지 않는다.

useMemo는 useCallback과 비슷하나 차이점은 다음과 같다.
useCallback는 콜백함수인 함수를 memoizing하는 것이고
useMemo은 콜백함수의 반환값을 기억하는 것이다.

때문에 이를 사용할 때 헷갈리지 않도록 주의깊게 살펴보고 사용할 필요가 있다.

useMemo 또한 비싼 연산이 아니라면 사용할 필요가 없다는 것을 기억해두자.

---

React.memo

React.memo는 전에 포스팅을 해둔것이 있기 때문에 간략하게 설명하자면
컴포넌트를 memoization하는 것이다.

즉, 컴포넌트의 변화가 없다면 리렌더링이 되지 않도록 해줄 때 사용한다.

다음과 같은 경우에 유용하게 사용할 수 있다.

부모 컴포넌트안에 수 천개의 컴포넌트가 있다하였을 때 , 부모의 state값이 바뀌면 수천개의 컴포넌트가 리렌더링될 것이다.

하지만 부모 state에 영향을 받지 않는 즉, 부모 state가 바뀌어도 자식 컴포넌트가 변경되지 않는다면 이전 컴포넌트를 그대로 쓸 수 있게 해주는 것이 React.memo이며 사용하는 방법은 다음과 같다.

import React from "react"

export default fuction React.memo(ChildComponent(){
	return <div>Child</div>
})

컴포넌트를 위처럼 React.memo로 감싸주면 된다.

---

정리

React를 사용할 때 Memoizing하는 주요 방법들을 정리해보았다.
불필요하게 Memoizing하는 것도 고려해봐야할 사항이지만 프로젝트 규모가 클 때 컴포넌트가 많아지고 함수호출량이 많아지고 비싼 연산값이 많아져 이들이 모두 합쳐질 때 비용이 꽤 커지게 된다.

그러므로 프로젝트를 구성할 때 이점을 고려하여 Memozing의 여부를 잘 판단해보자.

Reference

• https://en.wikipedia.org/wiki/Memoization
• https://dmitripavlutin.com/dont-overuse-react-usecallback/
• https://kentcdodds.com/blog/usememo-and-usecallback
• https://reactjs.org/docs/hooks-reference.html#usememo
• https://atomizedobjects.com/blog/react/what-is-the-difference-between-usememo-and-usecallback/
• [https://velog.io/@kcj_dev96/React.memo(https://velog.io/@kcj_dev96/React.memo)