[7팀 권연욱] Chapter 4-2. 코드 관점의 성능 최적화

[grappe96]

과제 체크포인트

배포 링크

과제 요구사항

• 배포 후 url 제출
• API 호출 최적화(Promise.all 이해)
• SearchDialog 불필요한 연산 최적화
• SearchDialog 불필요한 리렌더링 최적화
• 시간표 블록 드래그시 렌더링 최적화
• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

과제 회고

이번 과제를 하면서 적용한 개념들에 대해 정리했습니다.

1. 클로저를 이용한 API 캐싱

• createCachedFetch 함수로 클로저를 활용해 Promise를 캐시로 저장
• Promise.all에서 동일한 API를 여러 번 호출해도 실제로는 한 번만 실행되도록 구현
• 중복 네트워크 요청을 완전히 제거

2. React 렌더링 최적화

• useMemo: 필터링, 정렬 등 비용이 큰 연산 결과를 메모이제이션
• useCallback: 콜백 함수를 안정적으로 유지하여 자식 컴포넌트 리렌더링 방지
• React.memo: 컴포넌트를 메모이제이션하여 props 변경 시에만 리렌더링
• 지연 평가: 인피니트 스크롤을 위해 필요한 만큼만 필터링하고 렌더링

3. Context API 분리

• 상태(ScheduleMapContext)와 액션(ScheduleMapActionsContext)을 분리
• 각 컴포넌트가 필요한 것만 구독하도록 하여 불필요한 리렌더링 방지
• 드래그앤드롭 시 useSetSchedulesMap로 상태 변경에 구독하지 않도록 최적화

4. 함수형 업데이트

• setSchedulesMap((prev) => ...) 형태로 최신 상태에 접근
• dependency 배열에서 상태를 제외할 수 있어 성능 최적화에 유리

질문하고 싶은 내용

이번 과제를 진행하면서 제시된 문제를 그대로 따라가며 수정하다보니
과제처럼 가이드가 없을 때 어느 부분에 최적화를 적용해야 할지 판단하는 것이 어렵다고 느꼈습니다.
실무에서 코드를 작성할 때 최적화가 필요한 부분을 구별해내는 판단 기준이 무엇인지,
그리고 성능 문제가 실제로 발생하기 전에 예방적으로 최적화를 적용하는 것과
문제가 발생한 후에 최적화하는 것 중 어떤 접근이 더 적절한지 조언을 받고 싶습니다!