Skip to content

[2팀 학메 진채영]Chapter 1-3. React, Beyond the Basics#53

Open
devchaeyoung wants to merge 16 commits intohanghae-plus:mainfrom
devchaeyoung:main
Open

[2팀 학메 진채영]Chapter 1-3. React, Beyond the Basics#53
devchaeyoung wants to merge 16 commits intohanghae-plus:mainfrom
devchaeyoung:main

Conversation

@devchaeyoung
Copy link

@devchaeyoung devchaeyoung commented Jul 24, 2025

과제 체크포인트

배포 링크

https://devchaeyoung.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 개선

과제 셀프회고

기술적 성장

자랑하고 싶은 코드

개선이 필요하다고 생각하는 코드

학습 효과 분석

과제 피드백

학습 갈무리

리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.

메모이제이션에 대한 나의 생각을 적어주세요.

컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.

리뷰 받고 싶은 내용

shallowEquals에 baseEquals 로직 활용
- baseEuals에 typeGuard 적용
- 순수함수로 로직분리
- useMemo(() => fn, deps)활용
- 함수 자체를 메모이제이션함
훅 역할
- 객체 상태에서 실제 값이 변경되지 않았을 때 리렌더링 방지
- 폼 상태 관리에서 성능 최적화
- 복잡한 객체의 얕은 속성만 관리할 때 사용
역할
- 항상 동일한 함수 참조를 반환
@devchaeyoung devchaeyoung changed the title [학메 진채영]Chapter 1-3. React, Beyond the Basics [2팀 학메 진채영]Chapter 1-3. React, Beyond the Basics Jul 24, 2025
@nemobim
Copy link

nemobim commented Jul 24, 2025

과제하는 당신 멋져.....
image

@ckdwns9121
Copy link
Member

wow

Copy link

@bebusl bebusl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

심화과제두 파이팅!!!!! LGTM!


type ComparisonCallback = (a: unknown, b: unknown) => boolean;

export const baseEquals = (a: unknown, b: unknown, compareValues: ComparisonCallback): boolean => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

같은 코드베이스 반복되지 않도록 빼두신거 넘 좋은 것 같습니다 👍

Comment on lines +41 to +47
export const isSameType = (a: unknown, b: unknown): boolean => {
if (isNullish(a) && isNullish(b)) return true;
if (isPrimitive(a) && isPrimitive(b)) return typeof a === typeof b;
if (isArray(a) && isArray(b)) return true;
if (isObject(a) && isObject(b)) return true;
return false;
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 이렇게 다 뽑아서 비교하는 로직 엄청 깔끔하고 좋네요!!
다만 isNullish 는 packages/lib/src/equals/baseEquals.ts 에서 2번해서 검사해주니까 여긴 빼도 좋을거같습니다!!

@heojungseok
Copy link

heojungseok commented Jul 24, 2025

과제 하는 학메 최고

Copy link
Member

@yunwoo-yu yunwoo-yu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다음주도 함깨,,, LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants