React_기초다지기_하루정리(최적화 3 - 컴퍼넌트 랜더링 최적화하기)

React

---

⚑목표 : 컴퍼넌트 최적화하기

• DiaryEditor 컴퍼넌트 최적화하기!

---

[컴퍼넌트의 랜더링 시기]

• 본인이 가진 state에 변화가 생겼거나, 부모 컴퍼넌트가 랜더링 되거나, 자신이 가진 props가 변경되게
  되는 경우 랜더링이 일어난다!

---

[useCallback] :메모이제이션된 콜백을 반환한다

• 값을 반환하는 것이 아니라 콜백함수를 반환하는 것이다!
  또한, 그냥 콜백함수를 반환하는 것이 아니라 메모이제이션된 콜백함수를 반환한다!

->useCallback 함수는 컴퍼넌트가 Mount 될 때 한번만 랜더링 되기 때문에 초기 값의 설정이 중요하다
useCallback은 useEffect처럼 의존성 배열을 두번째 파라미터로 받게되는데, 이때 값은 마지막으로 랜더링 되었을 때의
값을 저장하고있다.
아래 코드를 보며 이야기해보자!

const onCreate = useCallback((author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1; // dataId가 하나씩 증가하도록 만들어줌
    setData((data)=>[newItem, ...data]); // 원래 있던 데이터에 새로운 아이템을 이어서 출력할 수 있음
  }, []);

• 위 코드에서는 의존성 배열이 빈 배열로[] 두었다. 이렇게 이전의 onCreat를 통해 만들어 놓았던
  data가 최신 데이터를 받게되면 다 사라지게된다.
  이유는, 의존성 배열을 빈배열로 하게되면, 마지막으로 랜더링 될 때의 값을 저장하게된다.
  만약 setData를 [newItem, ...data] 이렇게 하게 되면 콜백함수는 오직 최신 상태만
  저장하게 되게되는 현상이 발생하는 것이다.
  이러한 문제점을 해결하기 위해 상태변화를 함수업데이트 시켜주는 것이다.
  상태변화를 값으로 주는 것이 아니라 함수로 주면서 이전의 데이터를 함께 전달해주게된는 것이다.

//함수형 업데이트에 대해서 다시 생각해봐야겠다...아직 부족한거같음..