[React] 컴포넌트 성능 최적화를 위한 useMemo

안녕하세요! 이번시간에는 리액트 훅중 하나인 useMemo에 사용법에 대해 알아보도록 하겠습니다!

useMemo란?

불필요한 재랜더링을 없애줌으로써 컴포넌트 안에서 발생하는 성능을 최적화여 웹의 퍼포먼스를 올려 줄 수 있게 도와주는 리액트 훅입니다.

코드 살펴보기

import React, { useState } from "react";

function App() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const handleAddAllNumbers = (number) => {
    console.log("더하기");
    if (number.length === 0) return 0;
    const plusedList = number.reduce((a, b) => a + b);
    return plusedList;
  };

  const handleNumber = (e) => setNumber(e.target.value);
  const handleAddList = () => {
    console.log("리스트 추가");
    const newList = list.concat(parseInt(number));
    setList(newList);
    setNumber("");
  };
  return (
    <div>
      <input onChange={handleNumber} value={number} />
      <button onClick={handleAddList}>등록</button>
      <ul>
        {list.map((number, idx) => (
          <li key={idx}>{number}</li>
        ))}
      </ul>
      <div>
        <b>모두다 더한 값 : {handleAddAllNumbers(list)}</b>
      </div>
    </div>
  );
}

export default App;

저는 인풋에 숫자를 입력하고 버튼을 누르면 숫자 리스트들이 li에 다 들어가고 그 안에 있는 값들을 모두 다 더해준 값을 출력해주는 코드를 짜봤는데요.

우선, 이렇게만해도 원하는 기능은 잘 작동됩니다.
하지만, input 값을 조작하기만해도 handleAddAllNumbers 함수가 계속 재랜더링이 되어 콘솔에 '더하기'라는 값이 계속 나오게 됩니다.
때문에 불필요한 랜더링이 일어나게 되고, 이러한 것들이 많아지면 많아질수록 퍼포먼스에는 안좋은 영향을 끼칩니다.

handleAddAllNumbers 함수는 list가 변할때에만 재랜더링이 되어서 값이 나야하는데요, 이러한 것을 도와주는 것이 바로 useMemo입니다.

위의 코드를 사용하여 useMemo를 적용한 코드를 살펴보겠습니다.

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

function App() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const handleAddAllNumbers = (number) => {
    console.log("더하기");
    if (number.length === 0) return 0;
    const plusedList = number.reduce((a, b) => a + b);
    return plusedList;
  };

//useMemo 리액트 훅 사용
//useMemo 값을 받을 변수 선언 후
//useMemo(()=>호출할 함수,[state명]
//지정한 state가 변할때만 useMemo에 설정한 함수가 재랜더링이 됩니다.
  const plus = useMemo(() => handleAddAllNumbers(list), [list]);

  const handleNumber = (e) => setNumber(e.target.value);
  const handleAddList = () => {
    console.log("리스트 추가");
    const newList = list.concat(parseInt(number));
    setList(newList);
    setNumber("");
  };
  return (
    <div>
      <input onChange={handleNumber} value={number} />
      <button onClick={handleAddList}>등록</button>
      <ul>
        {list.map((number, idx) => (
          <li key={idx}>{number}</li>
        ))}
      </ul>
      <div>
        <b>모두다 더한 값 : {plus}</b>
      </div>
    </div>
  );
}

export default App;

위에서 사용한 방법대로 useMemo를 이용하여 더한값을 출력해보았습니다.
그결과, 버튼을 눌러 리스트를 추가했을때만 handleAddAllNumbers이 랜더링이 되어 결과값으로 출력이 됩니다.

감사합니다

참고자료

https://xiubindev.tistory.com/101