과제 체크포인트

배포 링크

https://hanghae-plus.github.io/front_6th_chapter1-3/

기본과제

equalities

• shallowEquals 구현 완료
• deepEquals 구현 완료

hooks

• useRef 구현 완료
• useMemo 구현 완료
• useCallback 구현 완료
• useDeepMemo 구현 완료
• useShallowState 구현 완료
• useAutoCallback 구현 완료

High Order Components

• memo 구현 완료
• deepMemo 구현 완료

심화 과제

hooks

• createObserver를 useSyncExternalStore에 사용하기 적합한 코드로 개선
• useShallowSelector 구현
• useStore 구현
• useRouter 구현
• useStorage 구현

context

• ToastContext, ModalContext 개선

과제 셀프회고

과제를 진행하면서 React hooks의 내부 동작 방식을 보다 깊이 있게 이해할 수 있었다. 라이브러리 없이 SPA를 직접 구현하다 보니, hooks가 어떻게 동작하고 컴포넌트 상태나 렌더링에 어떤 영향을 미치는지 논리적으로 고민할 시간이 많았다. 큰 어려움은 없었지만, 가끔 예상치 못한 동작을 마주치면 전체 흐름을 직접 따라가며 해결해볼 기회가 생겨 좋았다.

기술적 성장

• Context API에서 state와 dispatch 함수를 다른 Context로 분리해서 선언 시, 리렌더를 최소화할 수 있다는 것을 학습했다.

자랑하고 싶은 코드

개선이 필요하다고 생각하는 코드

학습 효과 분석

이번 과제를 통해 라이브러리 내부 구현 원리에 대한 이해가 크게 향상되었다. 라이브러리가 제공하는 핵심 로직을 직접 다뤄볼 수 있는 좋은 경험이었다.

과제 피드백

학습 갈무리

리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.

메모이제이션에 대한 나의 생각을 적어주세요.

컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.

리뷰 받고 싶은 내용

커스텀 hooks 및 context 분리 구현이 실제로 리렌더링을 최소화하는 데 효과적인 구조인지, 추가로 개선할 점이 있다면 피드백을 받고 싶습니다.