목록2024/04/20 (1)
hmk run dev
리액트 성능 측정 & 개선하기 (feat. memo & React DevTools)
리액트 성능 측정하기 - 효율적인 테이블 컴포넌트 구현 사내에서 테이블 컴포넌트를 만들어야 하는 일이 생겼습니다. 그러나 특정 조건들로 인해 성능이슈가 생겼는데요 1. 페이징 처리가 없는 테이블의 형태 2. 옵션값 개수의 모든 경우의 수를 고려한 옵션생성(수십 ~ 수백 개의 테이블 row UI가 생김) 3. 판매 마켓별로 옵션들의 값을 수정할 수 있는 UI 4. 테이블 데이터(옵션)들을 일괄변경 할 수 있는 기능(자주 사용할 것으로 판단) 페이징 처리가 없는 테이블과 자주 사용되는 데이터 일괄 변경 기능은 리액트에서 성능 문제를 초래할 수 있습니다. 특히 수백 개의 테이블 row가 재렌더링 되는 경우, 애플리케이션의 성능 저하가 발생할 수 있습니다. 성능 측정과 개선 성능 측정은 React DevTool..
React
2024. 4. 20. 23:22