useMemo, useRef, useCallback

useMemo

Memoization

비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 다시 발생했을 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높여주는 최적화 기법이다.

일반적으로 React의 컴포넌트 함수는 렌더링이 일어날 때마다 호출이 된다.

컴포넌트는 다음과 같은 상황에 (리)렌더링이 일어난다.

1. 자신의 상태가 변경될 때 (state 변경)
2. 새로운 props가 들어올 때
3. 부모 컴포넌트가 렌더링 될 때
4. 부모 컴포넌트의 상태가 변경될 때
5. shouldComponentUpdate 에서 true가 반환될 때
6. forceUpdate가 실행될 때

이때 만약 연산의 속도가 느린 컴포넌트라면 리렌더링이 될 때마다 연산을 다시 해줘 UI에서 지연이 발생하게 된다.
=> useMemo 사용

사용법

useMemo는 두개의 인자를 받는다.
1. 결과값을 생성해주는 함수
2. 어떤 값이 변경되었을 때 다시 실행할지 정해줄 변수

결론

성능이 좀 걸리는 부분에 useMemo를 사용하면 좋다.

React.memo(컴포넌트)
=> 이러면 부모 컴포넌트가 변경되어도 자식이 리렌더링 되지 않음.

useCallback

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.(useMemo 는 특정 값을 메모이제이션, useCallback은 특정 함수를 메모이제이션)

사용법

useCallback(함수,[]);
첫번째 인자로 인라인 콜백 전달
두번째 인자로 dependency 전달

메모이제이션 된 버전은 콜백의 의존성이 변경되었을 때만 변경
=> 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용

useRef

useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다.
이때 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지된다.

useRef는 리렌더링 되지 않고, 컴포넌트의 속성만 조회 및 수정을 한다.

사용법

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

1.DOM에 직접 접근할 때 사용
2. 지역 변수로 사용할 때 사용
=> useState과 차이점?

• useState는 값이 변경될 때 다시 렌더링을 한다.
• useRef는 값이 변경되더라도 다시 렌더링을 하지 않는다.