[React] useMemo

useMemo는 memoization에서 활용할 수 있게 나온 hook으로 이전 값을 기억해서 성능을 최적화 시킬때 적합한 용도다.

계산량이 많은 함수의 반환 값을 재활용하는 용도로 사용된다. 함수가 반환 된 값을 기억하고 의존성 배열에 따라 이전에 반환 된 값을 재사용 하게 해준다.
이는 별도의 State를 처리하게 해주며, 불필요한 연산을 줄여준다.

  // State
  const [number, setNumber] = useState(0);
  const [isKorea, setIsKorea] = useState(true);

  const location = {
    country: isKorea ? "한국" : "외국",
  };

  // Effect
  useEffect(() => {
    console.log("useEffect 호출");
  });
  

다음과 같이 location에 객체로 어떤 변수에 값을 할당해주고, effect가 일어나는 경우 이런 상황이 발생한다.

나라에 관한 이벤트에만 effect가 일어나는게 아닌 (location) 위에 같은 작업도 함께 effect가 일어나서 불필요한 연산이 들어가, 비 효율적인 상황이다.

const location = useMemo(() => {
    return {
      country: isKorea ? "한국" : "외국",
    };
  }, [isKorea]);

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

location을 usememo로 감사 주어, 디펜던시([value])를 주입하여, 이펙트를 호출하게 되면 필요한 작업에서만
effect가 호출된다.

이는 오래걸리는 작업이나, 필요한 연산만 작동시켜 메모리 누수를 방지할때 유용한 선택이 될 수 있다.

소스코드