[4팀 이연성] Chapter 1-3 React, Beyond the Basics

[LEEYEONSEONG]

과제 체크포인트

배포 링크

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

기본과제

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

심화 과제

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

과제 셀프회고

• React.memo와 useCallback의 적용 범위를 테스트 기반으로 구체적으로 판단할 수 있게 되었습니다.
• ThemeContext, UserContext, NotificationContext를 완전히 분리하여 컴포넌트 단위의 리렌더링을 제어하는 구조를 만들 수 있었습니다.
• 최적화 테스트 요구사항을 맞추기 위해 theme 값을 props로 전달하며 context 전파를 막는 전략을 적용해보았습니다.

기술적 성장

• 리액트의 핵심 기능은 메모이제이션을 직접 구현해보며 기존 프로젝트를 진행할때 그냥 사용했던걸 구조적으로 어떻게 구현이 되어 있는지 확인해보는 과제였습니다.

코드 품질

• App.tsx에서는 Provider만 관리하고, 실질적인 화면은 AppLayout.tsx로 분리하여 역할을 명확히 나눴습니다.
• 각 컴포넌트는 필요한 context만 구독하고, 불필요한 리렌더링이 발생하지 않도록 memo 처리하였습니다.
• 단순한 기능을 넘어 "왜 이렇게 구성해야 하는가"에 대한 고민이 설계에 반영되었다고 생각합니다.

학습 효과 분석

• 어떤 위치에서 context를 구독하느냐에 따라 리렌더링 영향이 달라진다는 점을 체감했습니다.!
• 실무에서도 성능 이슈가 발생하는 경우 적용 가능한 구조라고 판단됩니다.

과제 피드백

리뷰 받고 싶은 내용

• 현재 theme을 useTheme()로 바로 사용하지 않고 props로 전달하는 구조가 과연 최선인지 궁금합니다.
• AppLayout과 같은 최상위 UI 컴포넌트를 memo 처리하고, context를 바깥에서 props로 내려주는 방식이 맞는 방법인지??,,, 유지보수성과 확장성에 대해 조언 부탁드립니다.
• 불필요한 최적화?(오버 엔지니어링)가 되지 않기 위한 기준은 어떻게 세워야 할까요?
• 현재 과제와 무관한 질문이지만.. 만약 테스트 코드를 작성할 떄 단위 , 통합 ,e2e 테스트 가 존재하는걸로 아는데 프론트엔드에서는 어디까지 테스트를 진행해야할까요??