[7팀 신수빈] Chapter 4-2. 코드 관점의 성능 최적화

[ongsim0629]

과제 체크포인트

과제 요구사항

• 배포 후 url 제출
  https://ongsim0629.github.io/optimization/

• API 호출 최적화(Promise.all 이해)

• SearchDialog 불필요한 연산 최적화

• SearchDialog 불필요한 리렌더링 최적화

• 시간표 블록 드래그시 렌더링 최적화

• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

기술적 성장

• React.memo와 useCallback의 실전 적용: LectureRow, MajorsCheckboxGroup 등 리렌더링 비용이 높은 컴포넌트를 식별하고 메모이제이션을 적용하여 성능을 개선했습니다. 특히 useCallback을 통해 핸들러 함수의 참조 안정성을 확보하여 불필요한 하위 컴포넌트 렌더링을 막는 패턴을 익혔습니다.
• Context API 리팩토링: 단순히 상태(schedulesMap)를 노출하는 것에서 벗어나, addSchedule, deleteSchedule 등 구체적인 액션 메서드를 제공함으로써 상태 관리 로직을 캡슐화하고 컴포넌트 간 결합도를 낮추는 방법을 적용했습니다.

코드 품질

• SearchDialog 구조 개선: 거대한 컴포넌트였던 SearchDialog에서 LectureRow와 MajorsCheckboxGroup을 분리하여 가독성을 높이고 유지보수를 용이하게 만들었습니다.
• 안정적인 Props 전달: DraggableSchedule 컴포넌트에서 매번 새로운 함수를 생성하여 전달하던 onDeleteButtonClick을 안정적인 참조로 변경하여 성능 누수를 막았습니다.

학습 효과 분석

• 렌더링 최적화의 중요성: 드래그 앤 드롭과 같이 인터랙션이 빈번한 UI에서는 작은 리렌더링도 사용자 경험에 큰 영향을 미칠 수 있음을 확인했습니다.

과제 피드백

리뷰 받고 싶은 내용