📌 과제 목표

이번엔 심화까지 완료하는 것을 목표로! 세번째 과제 가봅시다.

이번에는 AI에게 코드를 구현하지 말고 최대한 로직을 체크하는 방향으로 요청해서 진행했다.

✅ 체크리스트

• [x] 코치님 학습과제 읽어보기
  • [x] React hooks
• [x] 구현해야할 과제 분석
  • [x] 기본 과제
  • [x] 심화 과제
• [x] 트러블슈팅 작성하기
• [x] 추가 학습이 필요한 부분 리스트업하기

📖 Background

• Shallow Equality
  • 얕은 비교는 가장 바깥쪽 레벨에서만 비교하는 방법
  • 1 depth만 비교하고 내부에 중첩된 값은 비교하지 않으며, 참조 (reference)만 비교
• hooks
  • useSyncExternalStore 를 통해 외부 상태를 안전하게 구독 가능
• Memoization
  • 동일 참조값 유지를 통해 리렌더링 방지
• 고차 컴포넌트 (HOC, Higher Order Component)
  • 컴포넌트를 입력받아 새로운 컴포넌트를 반환하는 함수

🤔 주요 궁금증

• React에서 얕은 비교가 중요한 이유는 뭘까?
  • 불필요한 리렌더링을 방지 → 성능 최적화의 핵심 매커니즘 중 하나
  • 상태 관리 → 객체/배열을 재사용하지 않으면 항상 변경으로 간주됨
• Memoization이 왜 필요할까?
  • 성능 최적화도 있지만, 동일한 참조값을 유지하기 위해서도 필요 (참조 동일성 유지)

✍️ 구현 중에 고민했던 것들