배포 링크

https://annkimm.github.io/front_6th_chapter4-2/

과제 체크포인트

과제 요구사항

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

이번 과제는 처음에 어떻게 최적화를 해야하는지 되게 막막했는데, 사실 프로파일러로 녹화? 해서 하기 보다는 얼마나 리렌더링이 되는지 반짝반짝이는 걸로 주로 확인했다. 게다가 코어 시간에 팀으로 (처음인듯...각자도생, 개인주의자 팀인지라 ㅎㅎ) 같이 코드 얘기 나누면서 대화한게 제일 재밌었던 일이었다. 마지막 과제여서 뭔가 벌써 마지막인가? 싶기도 하고, 에이 10주차라 그런가 뭔가 끝내기 싫은? 그런 마음도 들었던 듯 아 과제 최적화했으니, 이제 실무 최적화할 차례인가...ㅎㅅㅎ...

기술적 성장

1. 성능 최적화 역량 향상

• React 렌더링 최적화: memo, useMemo, useCallback의 적용
• 커스텀 훅 설계: useAutoCallback, useSchedule 등 재사용 가능한 추상화 구현
• 상태 관리 아키텍처: 전역/로컬 상태 분리를 통한 성능 격리 기법 습득
• 복합 문제 해결: API 중복 호출, 불필요한 리렌더링, 메모이제이션 부재를 통합적으로 해결

코드 품질

(prevProps, nextProps) => {
  // 배열 내용 비교
  if (prevProps.value.length !== nextProps.value.length) return false;
  return prevProps.value.every((v, i) => v === nextProps.value[i]);
}

• memo에 두번째 인자인 propsEqual을 알게 되고 개념을 이해하여 실제로 컴포넌트로 만들어서 사용해 본게 만족스러운 부분이었다.

학습 효과 분석

1. 개념 이해

• React 렌더링 원리: 가상 DOM 비교, 의존성 추적, 메모이제이션 메커니즘 실습
• 상태 관리 철학: 최소 상태 원칙과 상태 정규화 기법 체득

2. 디버깅 역량 발전

• 성능 병목 추적: 개발자 도구를 활용한 리렌더링 분석 능력

3. 패턴 습득

• 최적화 패턴: 메모이제이션, 의존성 최적화, 렌더링 최적화 체계화

과제 피드백

• 마지막 주차라 그런가 힌트도 많이 주시고 양도 적고.. ㅎㅎ...

리뷰 받고 싶은 내용

• 최적화를 하려다보니 useCallback이나 useMemo를 남발하게 되는 경향이 없지 않은데 어떤 기준으로 useMemo와 useCallback를 써야할까요? 그래서 이게 잘하는건가라는 의구심이 스스로에게 들더라구요. 예를 들면 SearchDialog를 위해서 SearchBox를 memo했는데 또, SearchItem까지 memo를 사용하게 되더라구요

SearchDialog.tsx
      ├── SearchForm.tsx
      ├── SearchBox.tsx
          └── SearchItem.tsx

(예시로 든 컴포넌트 구조입니다.)