리액트 렌더링 최적화하기, useMemo의 필요성, useCallback, useCallback과 참조 동등성

 

렌더링 최적화를 위한 Hook, useMemo, useCallback

 

 useMemo란?

특정 값을 재사용하고자 할 때 사용하는 Hook이다. 

 

 

 

예시 코드 해석

👉 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, <div> 엘리먼트로 출력을 하고 있다.

function Calculator({value}){

	const result = calculate(value);

	return <>
      <div>
					{result}
      </div>
  </>;
}

 

만약 위의 calculate가 내부적으로 복잡한 연산을 해야 하는 함수라 계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정한다면,

해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계속해서 호출할 것이고, 그 때마다 시간이 몇 초 이상 소요가 될 것이다.

 

유저에게 좋지 않은 UX를 주게 된다. 

 

👇 이때 useMemo()를 사용해보자! 👇

/* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return 
    	<>
     	 <div>
			{result}
      	</div>
  		</>;
}

useMemo를 호출하여 calculate를 감싸주면, 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value값이 동일할 경우에는 이전 렌더링의 value값을 그대로 재활용할 수 있게 된다. (메모이제이션(Memoization) 개념)

 

---

useMemo의 필요성

같은 컴포넌트 안에 있는 state중 하나라도 변화가 있으면 그 컴포넌트 전체가 리렌더링 되는데, 이는 불필요하다!!

이때 useMemo를 사용하면 불필요한 호출을 줄일 수 있다! 👏

//App.js

import React, { useState } from "react";
import "./styles.css";
import { add } from "./add";

export default function App() {
  const [name, setName] = useState("");
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  const answer = add(val1, val2);

  return (
    <div>
      <input
        className="name-input"
        placeholder="이름을 입력해주세요"
        value={name}
        type="text"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val1}
        type="number"
        onChange={(e) => setVal1(Number(e.target.value))}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val2}
        type="number"
        onChange={(e) => setVal2(Number(e.target.value))}
      />
      <div>{answer}</div>
    </div>
  );
}

// add.js

export const add = (num1, num2) => {
  console.log("숫자가 들어옵니다.");
  return Number(num1) + Number(num2);
};

 

➥ const [name, setName] = useState(""); 에서 name 이 변경되도, 컴포넌트 전체가 리렌더링 된다. 

 

 

---

 

👇useMemo 활용한 코드👇

 

➥ `useMemo`를 이용하여 `add `함수의 호출을 최소화했다.

그래서 이름을 입력할 때는 `add` 함수가 호출되지 않아야 최적화가 된 컴포넌트가 되었다. 

//App.js

import React, { useState } from "react";
import "./styles.css";
import { add } from "./add";

export default function App() {
  const [name, setName] = useState("");
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  
  const answer = useMemo(() => add(val1, val2), [val1, val2]); // changed here!!!!!!

  return (
    <div>
      <input
        className="name-input"
        placeholder="이름을 입력해주세요"
        value={name}
        type="text"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val1}
        type="number"
        onChange={(e) => setVal1(Number(e.target.value))}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val2}
        type="number"
        onChange={(e) => setVal2(Number(e.target.value))}
      />
      <div>{answer}</div>
    </div>
  );
}

// add.js

export const add = (num1, num2) => {
  console.log("숫자가 들어옵니다.");
  return Number(num1) + Number(num2);
};

숫자를 입력했을때만 콘솔창에 변화가 된다. (렌더링)

 

---

useCallback이란?

useCallback도 useMemo와 동일하게 메모이제이션 기법을 이용한 리액트 렌더링 최적화를 위한 Hook이다. 

 

useMemo 👉 값의 재사용을 위해 사용한 Hook

useCallback 👉 함수의 재사용의 위해 사용한 Hook

 

useCallback은 useMemo와 비교하여 동등한 수준의 최적화를 느낄 수 없다.

왜냐면 useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook이기 때문이다.

 

 

예시 코드 해석

add 함수는 props로 넘어온 x와 y 값을 더해 <div> 태그에 값을 출력하고 있다.

이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어진다.

 

function Calculator({x, y}){

	const add = () => x + y;

	return <>
      <div>
					{add()}
      </div>
  </>;
}

 

 

만약 위의 해당 컴포넌트가 리렌더링 되더라도 그 함수가 의존하고 있는 값인 x와 y가 바뀌지 않는다면! 함수 또한 메모리 어딘가에 저장해 뒀다가 다시 꺼내서 쓸 수 있을 것이다.

 

👇 이때 useCallback()를 사용해보자! 👇

useCallback Hook을 사용하면 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환한다. 

즉, x와 y값이 동일하다면 다음 렌더링 때 이 함수를 다시 사용한다.

 

/* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

	return <>
      <div>
			{add()}
      </div>
  </>;
}

 

useCallback는 함수을 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있다.

useCallback 를 더 효과적인 방법으로 사용하려면 👉 함수 자식 컴포넌트의 props로 함수를 전달해줄 때 이 useCallback을 사용하기!!

 

JavaScript에서 객체는 메모리에 저장할 때 값을 저장하는 게 아니라 값의 주소를 저장하기 때문에, 반환하는 값이 같을 지라도 일치연산자로 비교했을 때 false가 출력된다. 

React는 JavaScript 언어로 만들어진 오픈소스 라이브러리이기 때문에 기본적으로 JavaScript의 문법을 따라간다. 

 

따라서 useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있다. 따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있다.

 

=> useCallback과 참조 동등성

 

---

 

useCallback의 필요성

같은 컴포넌트 안에 있는 state중 하나라도 변화가 있으면 그 컴포넌트 전체가 리렌더링 되는데, 이는 불필요하다!!

여기서는 button이 클릭되면 전혀 관련없는 input 요소가 렌더링 되고 있다. 

이때 useCallback을 사용하면 불필요한 호출을 줄일 수 있다! 👏

//App.js

import { useState } from "react";
import "./styles.css";
import List from "./List";

export default function App() {
  const [input, setInput] = useState(1);
  const [light, setLight] = useState(true);

  const theme = {
    backgroundColor: light ? "White" : "grey",
    color: light ? "grey" : "white"
  };

  const getItems = () => {
    return [input + 10, input + 100];
  };

  const handleChange = (event) => {
    if (Number(event.target.value)) {
      setInput(Number(event.target.value));
    }
  };

  return (
    <>
      <div style={theme} className="wall-paper">
        <input
          type="number"
          className="input"
          value={input}
          onChange={handleChange}
        />
        <button
          className={(light ? "light" : "dark") + " button"}
          onClick={() => setLight((prevLight) => !prevLight)}
        >
          {light ? "dark mode" : "light mode"}
        </button>
        <List getItems={getItems} />
      </div>
    </>
  );
  
  // List.js
  
  import { useState, useEffect } from "react";

function List({ getItems }) {
  /* Initial state of the items */
  const [items, setItems] = useState([]);

  /* This hook sets the value of items if 
     getItems object changes */
  useEffect(() => {
    console.log("아이템을 가져옵니다.");
    setItems(getItems());
  }, [getItems]);

  /* Maps the items to a list */
  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default List;

 

---

 

👇useCallback 활용한 코드👇

 

➥ `useCallback`를 이용하여 `getItem ` 호출을 최소화했다.

자식 컴포넌트의 props로 함수를 전달해줄 때 이 useCallback을 사용하기가 좋다.

//App.js

import { useState } from "react";
import "./styles.css";
import List from "./List";

export default function App() {
  const [input, setInput] = useState(1);
  const [light, setLight] = useState(true);

  const theme = {
    backgroundColor: light ? "White" : "grey",
    color: light ? "grey" : "white"
  };

  const getItems = useCallback(() => [input + 10, input + 100], [input]); // changed here!!!!!!

  const handleChange = (event) => {
    if (Number(event.target.value)) {
      setInput(Number(event.target.value));
    }
  };

  return (
    <>
      <div style={theme} className="wall-paper">
        <input
          type="number"
          className="input"
          value={input}
          onChange={handleChange}
        />
        <button
          className={(light ? "light" : "dark") + " button"}
          onClick={() => setLight((prevLight) => !prevLight)}
        >
          {light ? "dark mode" : "light mode"}
        </button>
        <List getItems={getItems} />
      </div>
    </>
  );
  
  // List.js
  
  import { useState, useEffect } from "react";

function List({ getItems }) {
  /* Initial state of the items */
  const [items, setItems] = useState([]);

  /* This hook sets the value of items if 
     getItems object changes */
  useEffect(() => {
    console.log("아이템을 가져옵니다.");
    setItems(getItems());
  }, [getItems]);

  /* Maps the items to a list */
  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default List;

버튼을 아무리 눌러도 콘솔창에는 변화가 없다. 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓