useMemo과 useCallback

최적화를 위한 useMemo와 useCallback

useMemo

컴퍼넌트가 재렌더링 되더라도 이미 이전에 기억해두었던 값을 메모리에 기억해뒀다가 렌더링 될때 그 값을 준다.

const value = useMemo(() => {
	return heavyFuc();
}, [item])
                      

첫번째 인자로는 콜백, 두번째 인자로는 배열을 받는다.
첫번째의 인자에는 메모리에 기억해둘 값을, 두번째 인자는 의존성 배열로서 요소의 값이 업데이트 될때마다 기억해둘 값을 새로 업데이트 해준다.

하지만 무분별한 useMemo는 악영향을 끼칠수 있기 때문에 무거운 값을 기억해둘때만 사용해야한다.

useCallback

컴퍼넌트가 재렌더링 되더라도 이미 이전에 기억해두었던 '함수' 를 가져와준다.

첫번째의 인자에는 메모리에 기억해둘 '함수' 를, 두번째 인자는 의존성 배열을 넣어준다.

const value = (num) => {
	return num + 1
}

useEffect(() => {
	console.log('재렌더링')
}, [value])

컴퍼넌트가 재렌더링할때마다 console에 재렌더링이 찍히게 된다.

const value = useCallback((num) => {
	return num + 1
}, [item])

useEffect(() => {
	console.log('재렌더링')
}, [value])

이렇게 바꾸면, 재렌더링을 하더라도 value의 값이 바뀌지 않게 된다.

의존성 배열에 원시타입이 아닌 객체 타입을 넣어주게 되면, 컴퍼넌트가 재렌더링 될때 의존성 배열에 넣은 객체 또한 변한것으로 처리가 되어 다시 실행되게 된다. 왜냐하면 객체는 값을 가리키는것이 값이 있는 주소값을 가리키고 있기 때문이다.