Skip to content

Conversation

@aeongiing
Copy link

@aeongiing aeongiing commented Dec 19, 2025

✅ 워크북 체크리스트

  • 모든 핵심 키워드 정리를 마쳤나요?
  • 핵심 키워드에 대해 완벽히 이해하셨나요?
  • 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
  • 미션을 수행하셨나요?
  • 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

  • 디렉토리 구조 컨벤션을 잘 지켰나요?
  • pr 제목을 컨벤션에 맞게 작성하였나요?
  • pr에 해당되는 이슈를 연결하였나요?(중요)
  • 적절한 라벨을 설정하였나요?
  • 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
  • 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

- deps 배열에 필요한 state나 props를 빠뜨리면, **최신 값이 아닌 과거 값**을 계속 사용하게 된다.
- 이를 피하려면 **콜백에서 사용하는 모든 값들을 deps에 정확히 포함**해야 한다.
- 상태 업데이트가 목적이라면 `setState(prev => …)` 같은 **함수형 업데이트**를 사용하면 stale closure를 안전하게 피할 수 있다.
- **`useCallabck`**을 사용한 콜백 메모이제이션 예시 🍠

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

memo로 감싼 자식 컴포넌트가 있음에도 불구하고,
콜백을 메모이제이션하지 않으면 리렌더링이 발생한다는 점을 예시로 보여준 것이 이해에 큰 도움이 되었습니당

**2) React 성능 최적화(Optimization) Hooks 마스터**

- `useCallback`, `useMemo`, `React.memo`의 개념과 차이점을 명확히 구분할 수 있다.
- 메모이제이션(Memoization)이 무엇인지 이해하고, 불필요한 리렌더링을 방지하는 코드를 직접 구현할 수 있다.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헷갈릴만한 개념의 차이점을 명확히 구분하신것같아요

- 콜백 내부에서 사용하는 **state, props, 변수는 모두 deps에 포함**해야 한다.
- deps는 **항상 고정된 길이의 배열**이어야 한다.
- React는 deps를 `Object.is`로 비교한다.
- 의존성 변경 시 콜백이 어떻게 다시 만들어지는지
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

usecallback 특징을 잘 정리하셨네요!

@sunnyinha
Copy link
Collaborator

조이 마지막까지 열심히 노력해주셔서 감사하고 데모데이까지 파이팅입니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chapter10_실전 최적화(useMemo, useCallback, memo)와 Vercel 배포하기

4 participants