[11팀 김연수] Chapter 1-3 React, Beyond the Basics

[yeonsookk]

과제 체크포인트

배포 링크

https://yeonsookk.github.io/front_5th_chapter1-3/

기본과제

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

심화 과제

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

과제 셀프회고

기술적 성장

코드 품질

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

[SeongYoonMin]

연수님 너무 깔끔하게 구현하신거같아 많이배우고가요..! 사실 심화과제도중 로그인/로그아웃하는데 자꾸 item list의 renderlog가 찍히는게 왜이러지 하면서 찾아보던도중 연수님코드의 UserContext부분에서 의존성 주입과 관련된 주석과 코드를보고 제가 놓친부분을 알게되어서 수정할수있었어요..! 너무 좋은코드 잘배우고갑니다!

[dosilv]

연수님~~ 너무 깔끔하게 잘 구현하시구 주석도 꼼꼼하게 작성해주셔서 과제하시는 동안 고민하신 논리적인 흐름을 읽을 수 있어서 좋았어요 😚
특히 성윤님이 말씀하신 것처럼 userContext 부분에서 notificationContext과의 결합도를 낮추기 위해 함수를 외부에서 주입하신 부분이 인상깊었어요!👍🏻 그런데 직접 NotificationsContext를 직접 참조했을 때 실제로 사이드 이펙트가 발생했던 건지, 아니면 충분히 발생할 수 있으니 예방 차원에서 분리하신 건지 궁금해지더라구요..! (왜냐면 너무 좋은 방법인데 저도 별 생각 없이 직접 참조를 했던 것 같아서,,)
한 가지 개선 가능해 보이는 부분을 꼽자면 각 ContextProvider에서 value를 넘길 때 객체를 그대로 넘기고 있는데, 리렌더링 시 객체가 새로 생성되면 참조값이 바뀌기 때문에 내부 함수들을 useCallback으로 메모이제이션했지만 결국 value는 변경된 것으로 인식될 것 같아요. 그래서 value 부분도 useMemo로 래핑해서 넘기면 하위 컴포넌트의 리렌더링을 더 효과적으로 막을 수 있을 것 같습니당ㅎ.ㅎ
이번주 과제 땐 PR도 작성하셔서 배웠던 점이나 궁금했던 부분들 기록해두시고 피드백 받으시면 더 좋을 것 같아용! 너무 너무 수고하셨습니다 👏🏻💪🏻✨