useMemo
const memoizedValue = useMemo(() => <div>{a}</div>, [a])메모리제이션된 값을 반환한다라는 문장이 핵심이다. 하위 컴포넌는 상위 컴포넌트로부터 a라는 두 개의 props를 전달 받는다. 하위 컴포넌트에서는 a를 전달 받으면 서로 다른 함수로 각각의 값을 가공(또는 계산)한 새로운 값을 보여주는 역할을 한다.
useCallback
const memoizedCallback = useCallback(() => {doSomething(a)}, [a])메모리제이션된 함수를 반환한다라는 문장이 핵심이다. 컴포넌트가 렌더링 될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.
하지만, 비싼 계산이 아니라면 useMemo사용을 권장하지 않는 것처럼 이정도 수준의 함수 재선언을 막기 위해 useCallback을 사용하는 것도 크게 의미있어 보이지는 않는다.
useMemo의 경우는 컴포넌트를 렌더할 때마다 값을 연산하기에는 큰 비용을 필요로 할 때,
useCallback의 경우는 큰 비용을 필요로 하는 함수를 생성할 때 필요한 값의 변경에 의해서만 실행될 수 있도록 사용해보면 좋을 것이다. React에서는 Hook을 사용할 때, 자칫 잘못 사용될 경우를 대비하여 ESLint rules를 만들어두었는데, 즉, 해당 함수는 매번 렌더될 때마다 생성되고 실행될 것이라고 알려준다. 이를 방지하기 위해서는 useCallback으로 감싸서 해당 함수의 deps를 지정해주어야 매번 실행되는 것을 방지할 수 있을 것이다. 꼭 성능 최적화를 위해서만 useCallback을 사용하는 것이 아니라, deps를 지정해주어야 하는 상황에서 useCallback을 사용할 수도 있을 것이다.
memo
클래스형 컴포넌트에서는 shouldComponentUpdate라는 라이프사이클을 사용하면 되는데 함수형 컴포넌트에서는 라이프사이클 메서드를 쓸 수 없으므로 React.memo를 사용한다. 이 함수를 통해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다.
useRef
reference의 줄임말로, DOM을 직접 참조하기 위해 사용합니다.
useRef Hook은 DOM 선택 용도 외에도, 컴포넌트 안에서 조회 및 수정 가능한 변수를 관리하는 용도가 있습니다.
useRef로 변수를 관리하게 되면, 그 변수가 업데이트된다고 해서 컴포넌트가 리 렌더링 되지 않습니다.
즉, 굳이 리렌더링 할 필요가 없는 변수라면 useRef로 관리해주는 것이 효율적입니다.
