useCallback

김수정·2019년 12월 10일
1

useCallback이란

react hooks 중의 하나. 함수로 인한 렌더링 성능을 최적화하는 용도로 사용됩니다.
자바스크립트에서 참조형은 같은 모양을 지녔다고 해서 같은 값으로 취급되지 않죠.
예를 들면 {} === {}의 결과값은 false입니다. 함수도 참조형 데이터이기 때문에 늘 새로운 값으로 취급되어 동일성을 보장받지 못하므로 리액트에서 매번 새로운 렌더링 대상이 되어버립니다.

Usage case

  • props로 함수를 연결할 때.
    props로 함수를 연결하면 해당 뷰는 매번 새로운 함수로 인식하여 리렌더링 대상이 됩니다.

Usage method

import { useCallback } from 'react';
...
const func1 = useCallback(() => {}, [dependency array]);
profile
정리하는 개발자

1개의 댓글

comment-user-thumbnail
2020년 5월 27일

감사합니다

답글 달기