React-Hook-useMemo

Index
1. 목적
2. 사용방법
3. 코드 및 설명

---

목적

useMemo 에서 memo 는 Memoization에서 따온 것이다.
어떤 계산을 반복적으로 수행해야 할 때, 이를 매번 계산하지 않고
처음 계산한 값을 메모리에 저장하고 추후에는 불러와 사용하여 최적화를 달성한다.

단, useMemo() 는 메모리를 계속 잡고 있는 만큼, 꼭 필요한 경우에만 써야 성능향상을 기대할 수 있다. 무분별하게 사용하면 역효과가 난다.

---

사용방법

const value = useMemo(()=>{
	return calculate();
},[items])

useMemo()는 2개의 인자값을 갖는다.
첫번째 인자값은 수행할 콜백함수
두번째 인자값은 변수들이 포함된 배열로써, 배열 내 요소의 값의 변화가 일어나면 콜백함수가 재수행되어 결과값을 메모리에 저장시킨다. (빈 배열을 넣어줄 경우, 컴포넌트가 처음 마운트 될 때만 콜백함수가 수행되어 결과값을 메모리에 저장)

---

예제구현 및 설명

위 예제는 두가지 기능을 가진다. 하나는 하루에 먹는 끼니 수를 설정할 수 있는 기능, 나머지 하나는 버튼을 통해 현재 내가 있는 나라를 설정할 수 있는 기능이다.

이때, 최적화를 위해서 현재 위치인 location의 변수가 바뀔 때만 useEffect()함수를 호출한다고 하자.

다만, 변수 location의 경우 object를 사용하는데 이는 app 컴포넌트가 렌더링 될 경우 초기화 된다. 따라서 하루에 먹는 끼니 수를 저장하는 number state가 변경되어도 전체 컴포넌트가 렌더링 되므로 useEffect()함수를 호출해버리게 된다. (딜레마 봉착)

위와 같은 상황을 해결하기 위해 아래와 같이 코드를 짤 수 있다.

import React, { useEffect, useMemo, useState } from 'react';


function App() {
  const [number,setNumber] = useState(0);
  const [isKorea,setIsKorea] = useState(true);

  
  const location = useMemo(()=>{
    return{
      country: isKorea? '한국':'외국',
    }
  },[isKorea]);
  
  useEffect(()=>{
    console.log('useEffect 호출');
  },[location]) 

  return (

    <div>
      <h2>하루에 몇끼 먹어요?</h2>
      <input
        type ='number'
        value = {number}
        onChange={(e)=>setNumber(e.target.value)}
      />
      <hr/>
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={()=>setIsKorea(!isKorea)}>비행기 타자</button>
    </div>  
  );
}

export default App;

location 변수에 useMemo()를 통해 obejct를 받아오되, isKorea가 바뀔 때만 memoization을 다시 수행한다. 따라서 app 컴포넌트가 다시 렌더링 되더라도 location 변수는 바뀔 일이 없으므로 useEffect()가 아무때나 호출되지 않게 된다.

---

위 포스트는 별코딩님의 유튜브 강의를 기반으로 작성하였습니다.
https://youtu.be/XfUF9qLa3mU