React Hooks #8 useMemo(), useCallback()

eunji hwang·2020년 7월 13일
0

REACT

목록 보기
12/16

useMemo(CB,[state1, props2...])

메모이제이션(memoizaition)
- 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술
- React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)
- React-hooks useMemo() 사용
- Lodash 패키지 사용import memoize from 'lodash/memoize'

  • 1번 인자 콜백함수(CB) :
  • 2번 인자 [state1, props2...] : 배열에 변경을 감시할 state or props 를 전달
    • 인자의 값이 변경되지 않으면 이전 값 재사용, 변경된 경우 CB실행 후 반환 값 기억

useCallback(CB, [state1, props2...])

  • 리액트의 렌더링 성능을 위해 제공되는 훅
  • PureComponent, React.memo를 사용해도 발생하는 불필요한 렌더링을 잡아준다.
  • 2번 인자로 전달된 배열의 내부 값을 감시, 변경되었을 때만 렌더링한다.
  • 자식 컴포넌트에서 이벤트 인자를 전달할 때 사용
profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!

0개의 댓글