useMemo (2) 썸네일형 리스트형 리액트 성능 최적화 : React.useMemo TLDR : CPU 자원을 많이 소비하는 연산에 useMemo를 사용한다. 사용자에게 최적의 경험을 선사하려면 60fps이상을 제공해야 한다. (1000ms/60) = 약 16.7ms 이니, 하나의 연산이 이 시간 이상 걸리면 안된다는 것을 의미한다. npm run build / npm run serve를 통해 해당 최적화 조건을 확인한다. 크롬 개발자 도구의 성능 탭 > CPU를 6배 느리게 (본인은 맥os + edge를 활용함을 유의) 위 화면의 문제점은 리렌더링이 발생할 때마다 300ms정도 걸리는 연산을 계속 수행한다는 것이다. 다른 상태의 변화에 의해 해당 컴포넌트가 다시 호출될 때마다 300ms가 걸린다면 끔찍하다. 자세히 살펴보면 match-sorter의 연산이 많은 시간을 잡아먹고 있다. .. [Epic React] useCallback과 안전한 비동기 훅 만들기 대충 만든 비동기 훅을 호출하고 렌더링 전 뒤로가기를 누르면 콘솔에 해당 로그가 나온다. 가비지 컬렉팅 전, 컴포넌트가 버츄얼 돔 상에 없어도 상태 업데이트를 시도할 수 있다. 해당 문제를 막으면서 useCallback을 공부해보자 1. useCallback은 언제 쓰는가. React.memo 사용 렌더링 최적화시 props로 동일 객체 넘겨주기 의존성 배열에 상태 변화 없음을 알려주기 2. Let's Coding 1. unmount된 컴포넌트의 상태 업데이트를 막는 훅을 보자 주석은 useLayoutEffect를 사용하란 의미다. (LayoutEffect가 더 먼저 실행된다.) function useSafeDispatch(dispatch) { const mountedRef = React.useRef(f.. 이전 1 다음
