일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Recoil
- useCallback
- Compound Component
- JavaScript
- AJIT
- helm-chart
- 명시적 타입 변환
- 좋은 PR
- task queue
- 암묵적 타입 변환
- type assertion
- Render Queue
- TypeScript
- prettier-plugin-tailwindcss
- zustand
- CS
- 클라이언트 상태 관리 라이브러리
- Headless 컴포넌트
- useLayoutEffect
- docker
- jotai
- linux 배포판
- Custom Hook
- react
- Sparkplug
- Microtask Queue
- 타입 단언
- 프로세스
- 주니어개발자
- Redux Toolkit
Archives
- Today
- Total
목록2024/11/24 (1)
구리
[React] React 성능 개선의 여정 (144ms에서 61ms까지)
React 리렌더링 성능 개선 경험을 공유하는 글로 피드백은 언제나 환영입니다!서론회사에서 작업했던 영상 데이터를 차트로 보여주는 React 기반의 대시보드 프로젝트를 진행했었다. 프로젝트를 진행하며 성능 개선은 크게 신경쓰지 않았었기에 프로젝트 성능을 분석하고 일부 개선한 경험을 공유하려 한다.본론성능이 느리다는 기준이 뭘까?사용자의 상호작용을 통해 React는 상태가 업데이트되면 리렌더링이 되면서 화면이 다시 그려진다. 그런데 리렌더링 속도가 느려지면 사용자 경험도 낮아지기에 렌더링 속도가 성능의 기준이 될 것이다. 그렇다면 렌더링 속도가 느리다는 기준은 무엇일까?여러 자료들을 찾아보며 내린 결론은 다음과 같다.상호작용에 대한 응답 : 100ms이하로 응답해야 한다.애니메이션 : 각 프레임당 16ms..
React
2024. 11. 24. 14:26