[리뷰] 최적화

React Developer Tools for Chrome을 섳치하여 확인할 수 있다.

 

1. useMemo()

React Hook중 하나로 CPU소모가 심한 함수를 캐싱하기 위해 사용된다.

메모이제이션된 값을 반환한다.

 

useMemo로 전달된 함수는 렌더링 중에 실행된다.

 

2. 컴포넌트 매핑할 때 key값은 유니크하게 사용해야한다.

index로 사용하면 최적화가 잘 되지 않는다.

 

3. useCallback()

useCallback으로 함수를 선언해주면 종속 변수들이 변하지 않으면 굳이 함수를 재생성하지 않고, 리렌더링을 방지할 수 있다.