데일리 데브 인사이트

미디엄 게시글을 읽고 요약

선인장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 사용
- 스타일 컴포넌트 일관되게 적용
- 컴포넌트 문서화