과제 체크포인트
https://0miiii.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 개선
과제 셀프회고
기술적 성장
자랑하고 싶은 코드
개선이 필요하다고 생각하는 코드
학습 효과 분석
과제 피드백
학습 갈무리
리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.
메모이제이션에 대한 나의 생각을 적어주세요.
컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.
리뷰 받고 싶은 내용
useMemo 등 memoization을 수행하는 hook들을 사용하는 기준이 궁금합니다. 재렌더링이 필요없는 컴포넌트의 렌더링을 막기 위해 이 hook들을 모든 순간에 사용하게 되면 오히려 성능에 안좋은 영향을 미친다고 들었습니다. 복잡한 계산이 있는 곳에 사용하는 것을 권장하는데 복잡한 계산의 기준을 명확하게 모르겠습니다.
지금까지 일을 해오면서 눈에 띄게 렌더링 속도가 느렸던 컴포넌트가 있는데 이 때 useMemo를 사용해서 값이 확실히 변할때만 렌더링되도록 개선했었던 적이 있습니다. 이처럼 체감이 될 정도로 성능이 안좋은게 느껴질 때만 memoization을 사용하는 것을 고려하면 될까요? 성능 저하가 체감되지 않는다면 재렌더링이 여러번 발생하더라도 굳이 사용할 필요가 없을지 궁금합니다.
과제 피드백
고생하셨어요 영민님! 아숩게 회고가 작성되어 있지 않아서 한 주 고생하신걸 온전히 제가 이해하기는 어려웠는데요. 그래도 필요한 부분에 대해 코드 명료하게 잘 작성해주셨습니다.
질문 주신 부분 이어서 살펴보면요. 이미 적용해주고 계신 기준이 저는 개인적으로 맞다고 생각해요. 과거에는 모든 코드에 메모이제이션을 하는 파와 절대 하지않는다 파(?)로 나뉘어져서 막 논쟁이 있었던 것 같은데, 최근에는 그런 사람들이 많이 사라진 것 같아요. 일반적으로 저희가 따르는 최적화 논리대로 섣부른 최적화는 하지 않되, 성능적으로 이슈가 발생하는 지점이 생긴다면 그 지점에 대해서 파악한 뒤 그 부분만 국지적으로 처리하는게 적절한 사용 방법인 것 같아요. 내부적으로 이미 처리가 어느정도 되어있고 최근 들어서는 모든걸 해결해주는 관점에서 개발을 하는 것은 아니지만 컴파일러의 발전도 지속되고 있잖아요. 필요한 부분이 발견되면 그 때 적용하는 형태로 하면 좋을 것 같습니다.
고생하셨고 다음 주 과제도 화이팅입니다!