데일리 데브 인사이트
미디엄 게시글을 읽고 요약
선인장777
2025. 1. 3. 08:44
제목 |
Optimizing React Performance: Strategies to Avoid Unnecessary Re-Renders |
A Guide to Building Reusable React Components |
출처 | https://medium.com/javascript-in-plain-english/optimizing-react-performance-strategies-to-avoid-unnecessary-re-renders-f8110b4e37b2 | https://medium.com/@rashmipatil24/reusable-react-components-7b025f232ca4 |
요약 | 렌더링 빈도 줄이는 방법 - memo : 고차컴포넌트가 의존성 배열에 해당할때만 렌더링 - useCallback : 의존성 배열에 해당할때만 함수를 렌더링 - useMemo : 비용이 많이 드는 연산이나 파생 데이터(값)를 메모화하는 후크 - 인라인 선언 피하기 : 인라인 함수나 객체로 props로 전달할 경우 매번 새로운 참조를 생성하므로 자식 요소가 재렌더링 - immutable 데이터 구조 활용 : 변경 불가능한 데이터로 상태 관리 간소화 그외 react19에서 변경된 점을 반영한 재렌더링 최적화 ![]() |
재사용 가능한 컴포넌트의 원리 - 단일 책임의 원칙(SRP) - 컴포넌트 중신의 디자인 : props - 데이터 수신 및 동작 - 상속보다 composition 재사용 컴포넌트를 구축하기 위한 모범 사례 - propTypes (props유형과 요구사항 정의)을 사용하여 타입 안정성 부여 - 과도한 가공 금지 - 기본 props 사용 - 스타일 컴포넌트 일관되게 적용 - 컴포넌트 문서화 |