💡useCallback()이란?
React의 Rendering 성능 최적화를 위한 Hook
사용방법
import React, { useCallback } from "react";
React의 기능이므로 항상 상단에 import를 해줘야한다.
useCallback(() => {}, []);
첫번째 인자 = 콜백함수
두번째 인자 = 의존성배열(dependency array)
두번째인자인 댑스 배열안에 들어있는 값이 변화하면 memoization된 콜백함수가 반환된다.
React공식문서
메모이제이션된 콜백을 반환합니다.
인라인 콜백과 그것의 의존성 값의 배열을 전달하세요. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.
✔️useMemo()와 공통점
deps가 변하면 memoization된것을 반환한다
✔️useMemo()와 차이점
useMemo는 함수의 값을 반환,함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고,
useCallback은 함수를 반환,함수가 재생성 되는것을 방지하기 위한 목적이다.
React공식문서
useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.
useCallback은 deps가 변하면 콜백함수가 반환되고,
useMemo는 deps가 변하면 콜백함수의 값이 반환되므로 useMemo 첫번째인자로 콜백함수에 콜백함수를 넣으면 콜백함수가 반환되어 동일하게 된다.
주의
의존성 값의 배열이 콜백에 인자로 전달되지는 않습니다. 그렇지만 개념적으로는, 이 기법은 콜백 함수가 무엇일지를 표현하는 방법입니다. 콜백 안에서 참조되는 모든 값은 의존성 값의 배열에 나타나야 합니다. 나중에는 충분히 발전된 컴파일러가 이 배열을 자동적으로 생성할 수 있을 것입니다.
💡'함수형 업데이트' 란?
setState는 비동기로 동작한다.
(여러번 setState를 만나게 되면 batching(일괄 처리)하여 state를 업데이트하기 때문)
동기적 : 1 -> 2-> 3 ... 처럼 직렬로 일 처리
비동기적 : 1과 2가 병렬로 일 처리
비동기적인 방법을 해결하기 위해서 함수형 업데이트(functional update)를 사용할 수 있다. 즉 setState에 값을 그대로 전달하는 것이 아니라 함수를 전달하는 것 (setState를 동기적으로 사용할수있게된다.)
함수형 업데이트는 useCallback과 함께 props로 전될된 함수를 최적화할 때도 유용하게 사용된다.
setState(함수);🚀참고자료
