[9팀 이세라] Chapter 1-3 React, Beyond the Basics

[Xxell-8]

과제 체크포인트

배포 링크

https://xxell-8.github.io/front_5th_chapter1-3/

기본과제

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

심화 과제

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

과제 셀프회고

• 안전하게 객체 비교하기

  • Object.is(objA, objB)
    • 일반적으로 === 연산자를 이용해 비교를 많이 하는데, 이번 과제를 하면서는 보다 정확한 비교를 위해 Object.is()를 활용했다.
  • Object.prototype.hasOwnProperty()
    • 안전하게 키에 접근하려 활용했는데, 내용을 정리하면서 다시 찾아보니 요즘은 Object.hasOwn()으로 대체하는 걸 권장하는 것 같다! (ES2022에 새로 추가되어 최신 브라우저만 지원된다는 단점은 있는 듯)

• 리액트 Hook 사용법 고민

  • 평소에는 거의 대부분의 코드에 리액트 hook을 습관처럼 붙이고 있어서 이게 꼭 필요할까에 대한 고민은 하지 않았었는데, 과제를 하면서 이 부분에 useCallback이나 useMemo가 필요한가에 대한 고민을 해볼 수 있어 좋았다.
  • useRef를 구현하면서 Lazy initialization 이라는 개념을 처음 접했는데, useState 초기값을 함수로 넣게 되면 최초 초기화 시에만 함수를 호출하고 리렌더링 시에는 초기화가 되지 않는다고 한다. (관련 참고 글)
    • items를 컴포넌트 내에서 관리할 때 초기화가 여러 번 되는 이슈가 있어 Lazy initialization을 적용하려다가 context로 분리하면서 해당 로직은 적용하지 않았다.