[6팀 김혜연] [Chapter 1-3] React, Beyond the Basics

[Anne-Hyeyeon]

과제 체크포인트

기본과제

• shallowEquals 구현 완료
• deepEquals 구현 완료
• memo 구현 완료
• deepMemo 구현 완료
• useRef 구현 완료
• useMemo 구현 완료
• useDeepMemo 구현 완료
• useCallback 구현 완료

심화 과제

• 기본과제에서 작성한 hook을 이용하여 렌더링 최적화를 진행하였다.
• Context 코드를 개선하여 렌더링을 최소화하였다.

과제 셀프회고

기술적 성장

• 기존에 React가 제공하는 훅들을 직접 구현해보면서 내부 동작 원리를 이해할 수 있었음.
• useCallback과 useMemo의 차이 :
  return 값이 함수냐 일반값이냐의 차이에만 집중했었는데, 내부적으로 deps 배열을 어떤 로직으로 비교하는지도 중요하다는 점을 다시 학습함. (deps 배열이 변경되었다고 판단되면, useMemo는 memoized 값을 새로 계산하고, useCallback은 memoized 함수를 새로 생성하게 된다.)
• React.memo와 커스텀 memo
  기존에 많이 사용해본 React.memo를 직접 구현해보니, 내부에서 단순히 비교 함수만 잘 넘겨주면 된다는 사실을 깨달음.
• 다양한

코드 품질

• 타입.. 타입을 어떻게 다루어야 하는지 모르겠음. 제너릭 타입 사용은 익숙하지 않아서 더 힘들었음.
• 컴포넌트 구조를 분리하고 싶었는데 시간이 없었음...

학습 효과 분석

• React 렌더링 최적화 실전 사례
  실제로 여러 컴포넌트가 복잡한 상호작용을 할 때, useCallback, useMemo가 오히려 불필요하게 쓰이면 성능 저하가 생길 수도 있음. 언제 사용해야 하고, 언제 피해야 하는지 실제 사례 중심으로 더 공부가 필요.

과제 피드백

• 직접 구현을 통해 React와 Hooks 내부 동작 방식을 체득할 수 있었던 점이 좋았음.

리뷰 받고 싶은 내용

• useCallback에서 T extends (...args: Parameters) => ReturnType로 함수 타입을 정의했는데, 이 방식이 적절한지 확인받고 싶습니다.