230131_TIL

·2023년 2월 9일
0

useCallback

useCallback은 Memorization 기법을 이용하여 불필요한 렌더링과 계산을 줄임으로 컴포넌트 성능을 최적화하기 위한 목적의 Hook (=== useMemo)

  • 값을 메모리에 저장시켜놓는 Memorization
  • 렌더링시, 함수 내부 변수는 초기화가 된다.
  • 함수는 객체다. (함수형 컴포넌트 == 객체)
  • 렌더링 될 때 함수가 초기화가 된다. => 새로운 객체가 다시 만들어지고 메모리 주소도 새로 생성된다.
  • ㄴ 렌더링 전 변수와, 렌더링 후 변수가 다르다. => useEffect에서 의존성 배열은 객체 구분을 하지 못하고, 렌더링이 계속 일어나게 된다.

문제점 : 객체 초기화를 멈추지 않으면 (함수 렌더링), 렌더링이 계속 발생한다.
해결법 : useMemo, useCallback => 객체(함수) 자체를 Memorization 함으로써 해결할 수 있다.
값과 콜백을 메모리에 저장해두고, 특정 값이 변경될 때마다 호출하여 필요할 때 가져다 쓴다.

useEffect

useEffect는 렌더링시 발생하는 Side Effect를 다루기 위한 목적의 Hook

useContext

전역 데이터를 관리하기 위한 목적의 Hook

0개의 댓글