diaryitem을 하나씩 지우거나 새롭게 생성하는 경우
→ state가 변화하여 App 컴포넌트가 리렌더 → App컴포넌트가 리렌더 되면서 onEdit함수, onRemove함수가 새롭게 생성되어 prop으로 전달됨 → React.memo로 함수를 최적화해도 prop이 바뀌므로 DiaryItem 컴포넌트가 리렌더 → 공간 낭비!
⇒ onEdit함수와 onRemove함수에 useCallback과 함수형 업데이트를 사용한다.
'프론트엔드 > Java Script' 카테고리의 다른 글
| JavaScript Sec05_12 컴포넌트 트리에 데이터 공급(Context API) (0) | 2024.02.27 |
|---|---|
| JavaScript Sec05_11 복잡한 상태 변화 로직 분리 (useReducer) (1) | 2024.02.26 |
| JavaScript Sec05_9 최적화 3 - useCallback (0) | 2024.02.26 |
| JavaScript Sec05_8 최적화 2 - 컴포넌트 재사용 (0) | 2024.02.24 |
| JavaScript Sec 05_7 최적화 1 - 연산 결과 재사용 (useMemo) (0) | 2024.02.24 |
