제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
MERN 스택 개발자(React, MongoDB, Express, Node.js 기반 애플리케이션 개발자)
난이도: 중간(React 성능 최적화 및 MongoDB 쿼리 최적화 기초 지식 필요)
핵심 요약
- React 성능 최적화 :
React.memo
,useMemo
,useCallback
으로 불필요한 리렌더링 방지 - MongoDB 쿼리 최적화 : 인덱스 추가,
.lean()
사용,$or
/$in
쿼리 제한 - 리덕스 상태 관리 : Redux Toolkit으로 정규화된 상태 관리,
useSelector
의reselect
활용
섹션별 세부 요약
1. React 성능 프로파일링 및 최적화
- Chrome DevTools의 Performance 탭으로 리렌더링 원인 분석
React.memo
사용: props 변경 시만 리렌더링useMemo
로 계산 비용이 높은 값 메모이즈useCallback
으로 함수 참조 안정성 확보
2. 코드 스플리팅 및 레이지 로딩
React.lazy
+Suspense
로 페이지/컴포넌트 레이지 로딩react-router-dom
에서 라우트 코드 스플리팅 적용- 초기 번들 크기 감소 및 초기 로딩 시간 단축
3. 리덕스 상태 정규화 및 최적화
- Redux Toolkit으로 중첩된 객체 대신 정규화된 상태 관리
useSelector
에서reselect
로 memoized selector 사용key
속성 사용으로 DOM 노드 효율적 업데이트
4. 검색 입력 최적화
lodash.debounce
로 입력 시 API 요청 빈도 제한useMemo
+debounce
로 메모이즈된 디바운스 함수 생성- 프론트엔드/백엔드 모두 성능 개선
5. MongoDB 쿼리 최적화
- MongoDB 컬렉션에 인덱스 추가
.lean()
사용으로 Mongoose 오버헤드 제거$or
/$in
쿼리 사용 시 인덱스 미사용 시 성능 저하 주의
결론
- 핵심 팁 :
React.memo
,useCallback
,useMemo
로 리렌더링 제어, Redux Toolkit으로 상태 정규화, MongoDB 인덱스 +.lean()
사용 - 성능 개선 전후 : 초기 로딩 시간 6.5초 → 2.4초, 평균 컴포넌트 리렌더 500+ → 100 미만
- 실무 적용 : 성능 프로파일링 후 최적화 단계별 적용, 인프라/백엔드/프론트엔드 전반에 걸친 접근 필요