useCallback Hook

박종한·2020년 2월 3일
0

React

목록 보기
2/17

useCallback Hook?

이전에 만들었던 이벤트 핸들러 함수를 재사용하는 것
useMemo와 비슷하지만, 함수를 위한 Hook

Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 함
useCallback은 함수를 재사용하도록 해 새로 만들어지지 않게 함

import {useCallback} from 'react';

import문은 위와 같음

 const functionName = useCallback(() => {A}, [B]);

useMemo와 거의 동일한데, B의 값이 변경되지 않은 경우에만 이벤트 핸들러 함수 A를 재사용

useMemo : 전에 구했던 값을 다시 구하는 데 걸리는 시간을 줄이기 위해 해당 함수에 사용된 변수의 값이 변하지 않았다면 리렌더링 시에 재사용
useCallback : 전에 렌더링 된 이벤트 핸들러 함수에 사용된 변수의 값이 변하지 않았다면 리렌더링에 재사용 => Component 재사용 시 필요

profile
코딩의 고수가 되고 싶은 종한이

0개의 댓글