최적화 (완성)

지금 가장 심각한 부분이 하나 있는데, 일기아이템 하나만 삭제해도 일기리스트에 있는 아이템들이 죄다 리렌더링이 일어나고 있음

다른 아이템들은 리렌더링이 일어날 이유가 전혀없음..

• 일기 데이터를 삭제하거나 수정할때 나머지 아이템 들도 죄다 리렌더링이 일어나고 있음.
• 나중에 아이템들이 200개, 2000개 씩 늘어나거나, 리소스가 큰 이미지나 동영상을 렌더하게 되면 메모리를 굉장히 심하게 낭비하는 문제가 발생함

DiayItem 컴포넌트 최적화 하기

1. DiayItem 컴포넌트가 props으로 받고 있는 데이터는 총 8개임, 2개는 App컴포넌트로 부터 받은 함수(onRemove, onEdit)와 5개는 데이터(id, author, content, emotion, created_date)임

2. 이 중에서 일기데이터를 수정해서 변화시키는 content를 빼고는 나머지 (id, author, emotion, created_date)는 변화할 수 없는 데이터임.

3. 그래서 (onRemove, onEdit, content)에 집중해서 최적화 해보기

4. 최적화의 시작은 React.memo()로 컴포넌트 묶어주기 맨 하단 export하는 곳에 묶어주면 편함
   (그리고 useEffect()를 활용해 어떤 아이템이 리렌더링 되고있는지 console.log를 id로 확인해보기)

5. DiayItem은 React.memo()로 컴포넌트를 감싼다고 해서 최적화가 이루어지는 컴포넌트는 아님. 왜냐면 onRemove, onEdit는 onCreate함수처럼 똑같이 data State가 변화하면 재생성 될 수 밖에 없는 그런 함수들임.

6. App컴포넌트로 가서, onCreate를 최적화 했을때랑 똑같은 방법으로 useCallback으로 최적화 해주기
   (onRemove의 setData에 함수형으로 업데이트를 해야하는데 newDiaryList가 위 변수에서 생서이 되고 있기때문에 지우고 setData로 옮겨주고, 항상 최신의 State를 이용하기 위해서는 함수형 업데이트의 인자부분의 data를 사용해줘야함)

7. 최적화끝나면 글쓰고 저장누를시 하나의 아이템만 렌더가 되는지 또 삭제하면 리스트 전부 렌더링이 안되는지 확인해보기.

   const onRemove = useCallback((targetId) => {
       setData((data) => data.filter((data) => data.id !== targetId));
   }, []);
   
   const onEdit = useCallback((targetId, newContent) => {
       // console.log(targetId, newContent);
       setData((data) =>
           data.map((data) => {
               return data.id === targetId
                   ? { ...data, content: newContent }
                   : data
           })
       );
   }, []);