useRef, useMemo, useCallback의 차이점

useMemo와 useCallback은 리액트의 렌더링 성능 최적화를 위한 hook

• 함수형 컴포넌트는 그냥 함수이고 단지 jsx를 반환하는 함수이다.
• 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다.
• 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. (하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 되는것이 기본이다.)

useRef

useRef를 사용해야 할 때

1. 포커스, 텍스트 선택영역 혹은 미디어의 재생을 관리할 때
2. 애니메이션을 직접적으로 실행시킬 때
3. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
   => useRef는 DOM에 접근해야 할 때 사용한다.

• 가리킬 DOM을 위해 const value = useRef();를 선언하고 태그에 ref={value}를 넣으면 해당 DOM을 지정할 수 있게 된다.
• useRef를 사용하게 되면 Ref로 인해 DOM에 접근할 수 있고 Ref 객체의 current가 우리가 사용하길 바라는 DOM을 가르키게 된다. 또한 value.current.focus()를 사용하면 해당 DOM으로 focus를 시킬 수 있다.

const id = useRef(1);
id.current = N;			// N은 임의의 정수
// ref안의 값은 수정이 되어도 렌더링이 되지 않는다. 그러므로 렌더링이 되지 않는 값을 관리할 때 사용한다.

useMemo

• 메모리제이션된 값을 반환한다.
• CASE: 특정 상황에서만 동작되어야 하는 함수가 Component의 렌더링 조건에 따라 지속적으로 함수가 실행되는 경우
• useMemo는 deps가 변경되기 전까지 값을 기억하고 실행 후 값을 보관하는 역할로도 사용한다.
• 복잡한 함수의 return 값을 기억한다는 점에서 useRef와는 다르다.
• useRef는 특정 값을 기억하는 경우, useMemo는 복잡한 함수의 return 값을 기억한다는 경우에 사용한다.

const num = useMemo(callback, deps);

useCallback

• 메모리제이션된 함수를 반환한다.
• CASE: useMemo가 특정 value를 재사용하기 위함이라면 useCallback은 특정 함수를 재사용하기 위함이다.
• 자식 컴포넌트에 함수를 props로 줄때는 반드시 useCallback을 사용하여 리렌더링이 안되도록 하자.

const func1 = useCallback(callback, deps);