#10 성능 개선

2023.04.12

1. 성능 개선

✔ 성능을 측정해보고 문제되는 경우에 적용

1. useEffect or useMemo

컴포넌트 안에서 무거운 일을 하는데 매번 호출하지 않고 처음에만 호출

2. React.memo

UI 컴포넌트의 re-rendering 방지(props가 들어가면 re-rendering됨)

3. useMemo

props로 전달받은 함수를 실행해서, 그 결과값을 보존
deps = 의존인자가 하나라도 변하면 함수를 다시 실행해서 결과값 보존

4. useCallback

props로 전달받은 함수를 보존
deps가 하나라도 변하면 새로운 함수 리턴

2. React.memo vs useMemo vs useCallback

	React.memo	useMemo	useCallback
종류	HOC	hook	hook
클래스 또는 함수형 컴포넌트에서 사용 가능 여부	클래스 & 함수형 컴포넌트	함수형 컴포넌트	함수형 컴포넌트
사용 목적	단순 UI 컴포넌트 re-rendering 방지	함수의 연산량이 많아 그 결과값의 재사용 (결과값 보존)	함수의 재생성 방지