[7팀 박세리][Chapter 1-3] React, Beyond the Basics

[seriparkdev]

과제 체크포인트

기본과제

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

심화 과제

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

궁금한 점

• Context Provider 하위에 자식 컴포넌트가 많을 때만 context value들에 대해 useMemo, useCallback을 통해 참조 동일성을 유지하여 리렌더링이 발생되지 않도록 방지해주는 게 좋나요?
• 테스트 코드를 통과하기 위한 최적화는 마쳤는데 컴포넌트단의 코드에서 더 해주면 좋은 최적화가 있는지 궁금합니다. 개인적으로 최적화 비용에 대한 걱정 때문에 괜한 문제를 더 발생시킬까봐 실무에서도 잘 사용하지 않게 되는 것 같아요. 최적화를 하면 좋은 상황이란 뭔지... 최적화할만큼의 복잡한 계산이라는 게 뭔지 판단하기가 조금 어려워요.
• item이 많기 때문에 관련 계산이 성능 이슈를 일으킬 수 있을 것 같아서 filteredItems와 averagePrice 로직을 메모이제이션 했는데 과한 최적화인지 궁금합니다! (ItemList 컴포넌트)

과제를 수행하면서 느낀점

과제 시작 전 생각

최적화 훅을 잘 다뤄보지 않아서 직접 구현하기엔 많이 어려울 것 같다고 생각했음

과제 제출 후 생각

훅의 내부가 어떻게 동작해야할지 고려하며 작성하고 또 직접 사용하다보니 훅에 대해 조금 이해할 수 있었다.
그러나 조금 직접적으로 와닿지 않는 부분들에 대해 좀 더 깊게 공부할 필요성이 있을 것 같다.

기타

과제 난이도

3.5