[React] useMemo, useCallback, useRef

useMemo란 무엇일까?

useMemo는 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시키는 Hooks이다.
리액트는 DOM에 변화가 있을 때마다 렌더링을 하는데, 렌더링하는 과정에서 우리가 수행해야 할 연산을 계속 반복 한다.
그저 DOM에만 변화가 있어서, 컴포넌트에서 수행해야 하는 모든 연산을 다시 하여 렌더링하는 것은 자원을 낭비하는 것이 된다.
따라서, 우리가 원하는 연산에 수행하지 않았을 때에는 변하지 않게하고 수행했을 때만 변하게 해주는 것이 바로 useMemo이다.

const num = useMemo(callback, deps); //deps는 연산을 수행할 배열

번외로 성능 최적화를 위해 React.memo를 사용할 수 있다. React.memo는 컴포넌트의 prop이 변하지 않는 한 다시 렌더링을 하지 않는다.

useCallback이란 무엇일까?

useCallback은 useMemo처럼 연산을 줄이기 위한 Hooks이다. useMemo가 특정 값을 연산하는 것을 최적화한다면, useCallback은 함수의 재사용을 최적화한다.
역시나 렌더링할 때마다 컴포넌트의 함수들이 생성된다면 자원 낭비이다.
따라서, 해당 컴포넌트가 렌더링될 때만 함수를 생성해두고 다시 사용하여 자원을 낭비하지 않도록 한다.

const func1 = useCallback(callback, deps); //deps는 연산을 수행할 배열

둘의 구조가 똑같다고 봐도 무방하다. 하지만 용도가 다름을 명심해야 한다.

useRef란 무엇일까?

우선 ref에 대해 알아보자.

다음은 리액트 공식 문서의 내용입니다.

Ref를 사용해야 할 때
Ref의 바람직한 사용 사례는 다음과 같습니다.

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

즉, ref는 DOM에 접근해야 할 때 사용한다.

가리킬 DOM을 위해 const value = useRef(); 선언하고 태그에 ref={value}를 넣으면 해당 DOM을 지정할 수 있게 된다.

useRef를 사용하게 되면 Ref로 인해 DOM에 접근할 수 있고 Ref 객체의 current가 우리가 사용하길 바라는 DOM을 가르키게 된다.

value.current.focus()를 사용하면 해당 DOM으로 focus를 시킬 수 있다.

그리고 useRef를 로컬 변수로 사용할 수도 있다.

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