React의 렌더링 최적화

useMemo

특정 값(value)을 재사용하고자 할 때 사용하는 Hook

• Memoization

  기존에 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

  Memoization을 적절히 사용한다면 굳이 중복 연산을 할 필요가 없기 때문에 앱의 성능을 최적화할 수 있다.

useMemo는 바로 이 개념을 이용하여 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화시킨다.
직접 Memoization 개념을 이용하여 로직을 구현할 수도 있지만, useMemo Hook을 호출한다면 이런 로직을 직접 구현하는 것을 대신해 주기 때문에 훨씬 간편하다고 할 수 있다.

---

useCallback

함수의 재사용을 위해 사용하는 Hook
useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook

• 언제 사용하는 게 좋을까?

  자식 컴포넌트의 props로 함수를 전달해 줄 때 useCallback을 사용하기가 좋다.

• useCallback과 참조 동등성

  JavaScript에서 함수는 객체이다. 객체는 메모리에 저장할 때 값을 저장하는 게 아니라 값의 주소를 저장하기 때문에, 반환하는 값이 같을지라도 일치연산자로 비교했을 때 false가 출력된다.
  React는 리렌더링 시 함수를 새로이 만들어서 호출을 한다. 새로 만들어 호출된 함수는 기존의 함수와 같은 함수가 아니다.

• useCallback을 사용하는 이유?

  useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 함수의 메모리 주소 값을 저장했다가 다시 사용한다는 것과 같다고 볼 수 있다. 따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있다.

  function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  
  // 외부에 의존하는 값이 없으므로 종속성배열을 비워둘 수 있다.
  // 이벤트 객체를 가지고 setValue를 바꿔준다.
  const onChange = useCallback((e) => {
    const { value } = e.target;
    setValue(value);
  }, []);
  
  const reset = useCallback(() => setValue(initialValue), [initialValue]);
  
  return [value, onChange, reset];
  }