React Performance Tip 1

[amorfati0310]

성능 최적화
useMemo 특정 값이 바뀔 때만 함수가 실행되도록 useMemo(callback, deps)
useCallback 함수를 새로 만들지 않고 재사용 useCallback(callback, deps) 함수 넘겨주는 props 바뀌지 않게 해서 성능 최적화를 꾀 할 수 있음 !
deps 불필요한 deps가 있는지 확인해볼 것 -> setState(state) setState(state => )
React.memo 컴포넌트에서 리렌더링 최적화 할 때 사용됨 React.memo(component)

React Devtool 설정 -> Rendering이 어떻게 되는지 살펴보기 (Highlight update) 불필요한 reRendering이 없는지 살펴보기

• 댄 형님 memo를 사용하기 전에
  위에 성능최적화를 하기 전에 이 부분 부터 점검
• 상태를 컴포넌트로 감싸서 상위에서 안 가질 수 있는지 체크
• 상위에서 가지고 있어야 하는 경우 -> 나머지 안 바뀌는 부분만 분리할 수 있는지 children

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  );
}

function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}