[React] React Hooks - useMemo, useCallback, useRef

1. useMemo

의존성 변수가 변하지 않은 경우 기존의 값을 그대로 반환함으로서 렌더링 속도를 빠르게 할 수 있는 hook.

 

useMemo함수는 렌더링이 진행되는 과정에서 실행되기 때문에 유의해서 사용해야한다. 예를 들어 서버에서 데이터를 받아오거나 DOM 객체에 접근해야하는 경우는 useEffect를 사용해야 한다.

의존성 배열을 넣지 않을 경우 렌더링 때마다 항상 실행된다. 혹은 의존성 배열을 빈 배열로 남겨둔 경우 useEffect와 같이 마운트 시에만 호출된다.

 

const memoizedValue = useMemo(
	() => {
    	return updatedValue(deps1,deps2);
    },[deps1, deps2]
);

 

2. useCallback

useMemo와 달리 값이 아닌 함수를 반환하는 hook. 의존성 배열에 있는 변수들이 바뀔 때만 함수를 새로 정의해서, 매번 렌더링될 때마다 함수를 새로 정의하는 것을 방지한다.

 

의존성 배열에 따라 함수나 값을 반환한다는 점에서 useMemo와 같다.

 

const memoizedCallback = useCallback(
	() => {
    	updateSomething(deps1, deps2);
    },[deps1, deps2]
);

 

3. useRef

한 번 정의해두면 렌더링이 되어도 매번 같은 객체 반환.

useRef에 담겨있는 객체가 바뀌어도 리렌더링이 이뤄지지 않는다. 그렇기 때문에 useRef에 담겨있는 객체가 바뀌는 것을 인지하고 다른 액션을 취하고 싶을 경우에는 useCallback를 사용해야 한다.

function behaveSomething() {
	const inputRef = useRef(null);
    
    const onClickButton = () => {
    	inputRef.current.focus();
    }
    
    return (
    	<>
        	<input ref={inputRef} type='number' />
            <button onClick={onClickButton}>
            Click!
            </button>
        </>
    )
}