useMemo를 케이크처럼 쉽게 먹는 방법

🐕 useMemo는 왜 언제 써야 할까?

useMemo의 Memo는 Memoization의 memo이다.

메모이제이션...DP를 공부할 때 같이 봤던 기억이 새록새록 난다.

메모이제이션이란 이미 해서 답을 구한 값을 또 계산하는 비효율을 막기 위해

이전의 답들을 기억하는 기법이다.

당연하게도 메모이제이션을 하기 위해서는 어딘가에 정보를 저장해두어야하고

그 어딘가라는 공간은 컴퓨터세계에선.. 한도가 존재한다.

메모이제이션을 통해 기존값을 재활용하면서 연산속도를 증가시킬 수 있지만

그 반대급부 또한 존재하는 기법이라는 것!

그리고 이 문제는 곧바로 useMemo에도 적용된다.

---

👻useMemo를 사용하면 좋은 시점

리액트의 함수형 컴포넌트는 결국엔 함수입니다.

그렇기 때문에 결국 리렌더링이 되면서 함수가 재호출 되면

함수 내부의 값들도 전부 초기화되고 함수 내부의 코드들을 실행합니다.

 

그런데 만약에 변경된 값만 변경하면 좋을텐데

변경되지않아서 그냥 그대로 쓰면 될 값들도 새로 계산을 하면 비효율 적이겠죠?

그런데 만약 그 그대로 쓰면 될 값들이 엄청 무거운 연산을 필요로하면

(물론 프론트에서 그렇게 무거운 연산이 필요한 경우는 흔치 않긴 합니다.)

더욱 비효율적일 것입니다.

 

물론 남용하면 결국 메모리누수로 이어지니 무분별한 남용은 자제해야할 것입니다.

useMemo는 꼭 필요한 시점에만 사용하도록 해요!

예를 들면.... 값이 쉽게 바뀔일이 없으면서 꽤 무거운 연산이 필요한 함수를

묶어주면 좋겠네요?

---

🌞useMemo의 기본형태

useMemo(function,dependency)

dependency부분은 의존성배열의 자리로 선택적으로 넣어줄 수 있습니다.

dependency에 들어가있는 변수가 변경이 일어날때에만

useMemo를 호출하는 식으로 사용하기 위해 있는 듯하네요 

---

🥶 useMemo의 실전 사용

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

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

  const location = useMemo(() => {
    console.log('useMemo가 실행되었어요');
    return {
      country: isKorea ? '한국' : '외국',
    };
  }, [isKorea]);

  useEffect(() => {
    console.log('useEffect 호출');
  }, [location]);

  return (
    <>
      <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>
    </>
  );
};

export default App;

간단한 useMemo의 용례입니다.

{country : isKorea}

위와 같은 객체를 useMemo안에 감싸주고 의존성 배열안에 location을 넣어줬습니다.

만약 코드가 잘 동작한다면

location의 값이 바뀔때에만 useMemo가 동작할테니까

우리의 의도대로 작동한다면

저 인풋창은 아무리 수정해도 useMemo가 새로 호출되지 않을테니

console.log()는 실행되지 않을 것이고

비행기 타자 버튼을 누른 경우에만 useMemo의 콘솔이 실행될 것입니다.

useMemo의 콜백함수가 return 해주는 값을 변수에 할당해줍니다.

---

이해했다고 생각할 때가 가장 무서울 때다.