리액트엔 참 훅들이 많다.
제목과 같이 useMemo와 useCallback은 없어도 동작은 되지만, 소스 최적화를 위해서 필요한 기능들이다.

사전 지식:

• 함수형 컴포넌트는 그냥 함수다. 함수형 컴포넌트는 단지 jsx를 반환하는 함수다.

• 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.

• 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 되는게 기본이다.)

함수가 재선언될 필요가 없는 경우 사용.

✅useMemo

메모이제이션 된 값을 반환한다.
*메모이제이션 : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

const colorKor = getColorKor(color);
const movieGenreKor = getColorKor(movie);

위의 코드를 아래처럼 바꾼다.

import { useMemo } from "react"; // useMemo 훅 import
const Info = ({ color, movie }) => {
  
  const colorKor = useMemo(() => getColorKor(color), [color]);
  const movieGenreKor = useMemo(() => getMovieGenreKor(movie), [movie]);

  return (
    <div className="info-wrapper">
      제가 가장 좋아하는 색은 {colorKor} 이고, <br />
      즐겨보는 영화 장르는 {movieGenreKor} 입니다.
    </div>
  );
};

useMemo를 이용해서,
color가 변경됐을 땐, color관련 함수만 실행시키고,
movie가 변경됐을땐, movie관련 함수만 실행시키자.
React 공식 문서에 적혀 있듯이, computeExpensiveValue.
굳이 간단한 로직에서 사용할 필요는 없다.

✅useCallback

메모이제이션된 함수을 반환한다.(useMemo는 함수가 아니라 값을 반환함)

단순한 함수가 다시 재선언 될 필요 없이, 최초 mount 된 후 선언 되고 차후 재사용 하길 원할 때 사용.

const onChangeHandler = e => {
    if (e.target.id === "color") {
	  setColor(e.target.value);
    } else {
      setMovie(e.target.value);
    }
};

위의 코드를 아래처럼 바꾼다.

import { useCallback } from "react";  // useCallback 훅 import

const onChangeHandler = useCallback(e => {
    if (e.target.id === "color") {
      setColor(e.target.value);
    } else {
      setMovie(e.target.value);
    }
}, []); 

첫 mount 될때만 선언되면 되기 때문에 빈배열

https://narup.tistory.com/273
참고되는 링크

https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/should-you-really-use-usememo.md