React 기초 - useMemo 함수

useMemo 함수의 사용

import { useState, useMemo } from 'react';
import './App.css';

function App() {
  const [list, setList] = useState([1, 2, 3, 4]);
  const [string, setString] = useState('합계');

  const getAddResult = () => {
    let sum = 0;

    list.forEach((i) => (sum += i));
    console.log(sum);

    return sum;
  };

  return (
    <div>
      <button
        onClick={() => {
          setString('안녕');
        }}
      >
        문자 변경
      </button>

      <button
        onClick={() => {
          setList([...list, 10]);
        }}
      >
        리스트값 추가
      </button>
      <div>
        {list.map((item) => (
          <h1>{item}</h1>
        ))}
      </div>
      <div>
        {string} : {addResult}
      </div>
    </div>
  );
}

export default App;

ㆍ 위 코드는 문자를 변경하는 버튼을 누를 때마다 getAddResult() 함수가 실행되는 비효율적인 과정이 발생한다.

ㆍ 이러한 비효율적인 과정을 생략하기 위해 useMemo() 함수의 사용이 필요하다.

 

const addResult = useMemo(() => getAddResult(), [list]);

ㆍ useMemo() 함수를 통해 addResult() 함수를 추가해준다.

ㆍ 첫 번째 매개변수는 호출할 함수를 명시해 주고, 두 번째는 의존관계 설정에 대한 매개변수이다.

ㆍ 즉, list 값의 변경이 일어날 때만 getAddResult() 함수를 실행한다는 의미이다.

---

GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간