컴포넌트의 렌더링은 함수가 실행 될때마다 내부에 선언되어있던 변수, 함수가 매번 다시 선언됩니다.
컴포넌트는 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리랜더링 됩니다.
useMemo와 useCallback은 왜 사용할까?
하위 컴포넌트는 props로 넘겨 받는 인자들 중, 하나라도 변경될때마다 리랜더링 되는데,
이 때, 기본적으로 하위 컴포넌트의 모든 함수들이 실행되게 됩니다.
만약 컴포넌트 내 함수의 개수가 많고, 처리해야하는 데이터도 많아진다면
이는 성능 저하로 이루어질 수 있습니다.
이를 해결하는 방법으로 리액트는 useMemo와 useCallback의 사용을 권하고 있습니다.
useMemo는 메모리제이션을 사용하여 값을 저장해놓고
useCallback을 사용하여 함수를 실행하지 않고, 이전의 값을 불러옵니다.
반응형
댓글