useMemo, useCallback, useRef

useMemo()

: Memoized value를 리턴하는 Hook

-> Memoized value : Memoization 된 결과 값 -> 메모를 해두었다가 나중에 다시 사용하는 것

 

useMemo() 사용법

const memoizedValue = useMemo(

() => {

//연산량이 높은 작업을 수행하여 결과를 반환

return computeExpensiveValue(의존성 변수1, 의존성 변수2); },

[의존성 변수1, 의존성 변수2]

);

• Memoization의 개념처럼 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create함수를 호출하여 결과값을 반환하며 그렇지 않은 경우에는 기존함수의 결과값을 그대로 반환함
• 컴포넌트가 다시 렌더링 될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있음
• useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행되기에 일반적으로 렌더링이 일어나는 동안 실행돼서는 안될 작업을 useMemo의 함수에 넣으면 안됨
• 의존성 배열을 넣지 않을 경우, 매 랜더링마다 함수가 실행됨
• 의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 create함수가 호출됨 
  useCallback()
•  
•  

: useMemo() hook과 유사하지만 값이 아닌 함수를 반환

• 컴포넌트가 렌더링 될 때마다 매번 함수를 새로 정의하는 것이 아니라 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의해서 리턴해 주는 것

useCallback() 사용법

const memoizedCallback = useCallback (

() => {

doSomething( 의존성 변수1, 의존성 변수2);

},

[의존성 변수1, 의존성 변수2]

);

• 의존성 배열에 있는 변수 중 하나라도 변경되면 memoization 된 콜백 함수를 반환함

동일한 역할을 하는 두 줄의 코드

useCallback( 함수, 의존성 배열);

useMemo( () => 함수, 의존성 배열);

 

useRef()

: Reference를 사용하기 위한 Hook

• 레퍼런스 객체를 반환함

• 변경 가능한 current라는 속성을 가진 하나의 상자
• 매번 렌더링 될 때마다 항상 같은 레퍼런스 객체를 반환함
• 내부의 데이터가 변경되었을 때 별도로 알리지 않는다. -> 커런트 속성을 변경한다고 해서 재렌더링이 일어나지 않음

-> 리액트에서의 레퍼런스 = 특정 컴포넌트에 접근할 수 있는 객체

 

refObject.current -> current : 현재 참조하고 있는 element

 

useRef() 사용법

const refContainer = useRef(초깃값);

-> 파라미터로 초깃값을 넣으면 해당 초기값으로 초기화된 레퍼런스 객체를 반환함

만약, 초기값이 null이라면 current의 값이 null인 레퍼런스 객체가 반환됨 -> 이렇게 반환된 레퍼런스 객체는 컴포넌트의 라이프타임 전체에 걸쳐서 유지됨

 

Callback ref : 돕노드의 변화를 알기 위한 가장 기초적인 방법