오늘도 최적화를 진행해보자!
일기 아이템 하나만 삭제해도 나머지 일기들이 모두 재렌더링이 되고있다
오늘은 다이어리 아이템에 초점을 맞춰 최적화를 진행해보자!
프롭으로 받고 있는 것 중 두가지 (onEdit, onRemove)는 함수, 나머지는 데이터다
데이터 중 내용인 Content 를 제외하고는 모두 변할 수 없는 데이터다
오늘의 최적화 : onEdit, onRemove
최적화의 시작은 React.memo로 컴포넌트를 묶어주는것이다!
React.memo(DiaryItem)
그리고 언제나 그랬듯 useEffect로 어떤 아이템들이 재렌더링이 일어나고 있는지 확인해보자
onCreate, onRemove -> 데이터 스테이트가 변하면 재생성 될 수 밖에 없는 함수이다
부모 컴포넌트인 Simple.js로 가서 저번에 했던것과 마찬가지로 onCreate, onRemove 함수에 최적화를 시켜보자
onRemove -> setData() <-에 함수형으로 업데이트 하도록 지시해야한다, 의존성 배열은 빈값
파라미터로 전달되는 data는 최신 데이터를 전달해야 한다 (함수형 업데이트 인자 부분에 데이터를 사용하자)
onEdit도 마찬가지로 함수형 업데이트 실행!
