최적화 - useMemo, React.memo, useCallback

[Youngju-Jang]

[Youngju-Jang]

React.memo

• 부모컴포넌트가 리렌더될경우 자식컴포넌트 모두 리렌더됨
• 관련없는 업데이트로인해 자신도 업데이트 될 수 있음
• 렌더링에 조건을 걸면 업데이트 조건 불일치시 리렌더안됨
• React.memo 로 가능
• 공홈 확인 : https://ko.reactjs.org

[Youngju-Jang]

React.memo 사용시 (심화버전)

• 객체를 비교 : 얕은비교 : 값자체가 변경이 없더라도 변경되었다고 생각하여 리렌더링됨

• 객체가 아닐경우 : set State를 사용하더라도 실제 값변경없으면 리렌더링 안됨

• 

• 이부분을 성능최적화 하기위해 areEqual 함수를 사용할 수도 있음

• 링크

[Youngju-Jang]

useCallback

공식문서

• 기존 : state가 []빈배열일때 한번, 재생성될때 한번 두번불렸었음
• 삭제될때도 같이 불렸었음
• app.js가 리렌더링 될때마다 안에 포함된 onCreate함수가 재생성되지 않도록 useCallback처리.
  • useMemo로 할 경우 함수를 리턴하는게 아니기 때문에 넘겨줄 수가 없다.

[Youngju-Jang]

  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;
    setData((data) => [newItem, ...data]); // 함수형태로 보내기
  }, []);

참고링크 https://developer-talk.tistory.com/252

[Youngju-Jang]

Functional Update : 원래는 비동기로 실행시 setXXX() 안에 값 기준으로 실행되기때문에 실행되는 도중에 값이 변하더라도 적용이 안되지만, 함수형 업데이트로 setXXX안에 함수값으로 넣을경우 도중에 변하는 값으로 적용된 다~~ 인듯

[Youngju-Jang]

최적화3

• 삭제시 다른 아이템들도 리렌더링됨
• DiaryItem 에서 변경 가능한것 : onEdit, onRemove, content