[리액트] useMemo, useCallback, useRef Hook

useMemo() ⭐⭐⭐

• Memoized value를 리턴하는 Hook

• Memoization → 특정 함수의 결과값을 미리 저장해두어, 재호출 시 연산을 수행하지 않고 저장된 결과값을 반환하여 불필요한 연산량을 줄이고 컴퓨터 자원을 절약하는 기법. 저장된 결과값을 memoized value라고 부름

  • 결과값을 메모를 해뒀다가 필요할 때 다시 활용하는 방식

• useMemo()사용법

const memoizedValue = useMemo(
  () => { // 첫번째 파라미터: memoizedValue를 생성하는 create 함수
    // 연산량이 높은 작업을 수행하여 결과를 반환
    return computeExpensiveValue(의존성 변수1, 의존성 변수2);
  },
  [의존성 변수1, 의존성 변수2] // 두번째 파라미터: 의존성 배열
);

// 의존성 배열의 변수값이 변했을 경우에만 새로 create 함수를 호출하여 결과값을 반환
// 그렇지 않은 경우에는 기존 함수의 결과값을 그대로 반환

// Remember! useMemo로 전달된 함수는 렌더링 도중에 실행됨. ⭐⭐⭐

// 의존성 배열을 생략할 경우, 매 렌더링마다 함수가 실행됨.
const memoizedValue = useMemo(
  () => computeExpensiveValue(a,b)
);

// 의존성배열이 빈 배열인 경우, 컴포넌트 마운트 시에만 호출 됨.
// 마운트 이후에는 값이 변경되지 않음.
// 마운트 시점에만 한 번 값을 계산할 필요가 있을 때 이런 방식을 사용
const memoizedValue = useMemo(
  () => {
    return computeExpensiveValue(a,b);
  },
  []
);

useCallback() ⭐⭐⭐

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

• 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의하여 return하는 방식

• useCallback() 사용법

const memoizedCallback = useCallback(
	() => { // 첫번째 파라미터: callback 함수
		doSomething(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2] // 두번째 파라미터: 의존성 배열
);

// 의존성 변수 중 하나라도 변경되는 경우에만 memoization된 callback함수를 반환함.
// 의존성 배열에 따라 memoized된 것을 반환한다는 점은 useMemo와 동일

// 동일한 역할을 하는 두 개의 코드
useCallback(함수, 의존성 배열);
useMemo(() => 함수, 의존성 배열);

useRef() ⭐⭐⭐

• Reference를 사용하기 위한 Hook

• Reference : 특정 컴포넌트에 접근할 수 있는 객체

• useRef() Hook은 reference 객체를 반환함

• reference 객체는 일반적인 javascript 객체임.

• useRef() 사용법

const refContainer = useRef(초기값);

// 해당 초기값으로 초기화된 reference 객체가 반환됨.
// 반환된 reference 객체는 component lifetime 전체에 걸쳐 유지됨.
// useRef hook은 변경 가능한 current라는 속성을 가진 상자라고 생각하기

• useRef 사용 예시

function TextInputWithFocusButton(props){
	const inputElem = useRef(null);
	
	const onButtonClick = () =>{
		//'current'는 마운트된 input element를 가리킴
		inputElem.current.focus();
	}
	
	return(
		<>
			<input ref = {inputElem} type = "text"/>
			<button onClick={onButtonClick}>
				Focus the input
			</button>
		</>
	);

}

• useRef hook은 매번 렌더링 될 때마다 항상 같은 레퍼런스 객체를 반환

• useRef() hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않음. → ref에 DOM 노드가 연결되거나 분리되었을 때 코드를 실행하려면 Callback ref를 사용해야 함.

• Callback ref 예시

function MeasureExamaple(props){
	const [height, setHeight] = useState(0);
	
	const measureRef = useCallback(node =>{
		if (node !== null){
			setHeight(node.getBoundingClientRect().height);
		}
	}, []);
	
	return(
		<>
			<h1 ref = {measureRef}>안녕, 리액트</h1>
			<h2> 위 헤더의 높이는 {Math.round(height)}px 입니다.</h2>
		</>
	);
}