[9팀 박상수] Chapter 1-3. React, Beyond the Basics

[parksangsoo]

과제 체크포인트

배포 링크

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

과제 셀프회고

리액트에서 쓰이는 hooks에 대해 어떤 원리로 쓰이고 어떻게 만드는지 좀 더 자세히 알게된 거 같았다.
아직은 부족하지만 반복해서 공부하다보면 코드 리팩토링과 성능최적화를 좀 더 능숙하게 할 수 있을 거 같다

기술적 성장

어떤 hook을 어떤 상황에 필요하고 어떻게 써야하는 지에 대한 이해도를 바탕으로 좀 더 정교하고 세밀한 코딩이 가능해진 거 같다!
나만 그렇게 느껴지는 건진 몰라도;

자랑하고 싶은 코드

if (Array.isArray(a) && Array.isArray(b)) {
if (a.length !== b.length) return false;
return a.every((val, i) => deepEquals(val, b[i]));
}

if (typeof a === "object" && typeof b === "object") {
const aObj = a as Record<string, unknown>;
const bObj = b as Record<string, unknown>;
const aKeys = Object.keys(aObj);
const bKeys = Object.keys(bObj);
if (aKeys.length !== bKeys.length) return false;

return aKeys.every(
  (key) => Object.prototype.hasOwnProperty.call(bObj, key) && deepEquals(aObj[key], bObj[key]), // 재귀 (DFS)
);

}

};

내가 자랑하고 싶은 코드는 깊은 비교 함수에서 배열 비교와 객체 비교 부분인데
왜 자랑하고 싶냐면 재귀함수라는 개념은 알고 있었고 알고리즘 공부할 때 깊은탐색 할 때만 써본 게 전부였었다
그래서 알고리즘용 함수라는 인식이 박혔었는데 이번 과제를 통해서 그 인식이 깨져버린 거 같다
이럴 때도 쓸 수 있는 거였다니

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

전체적으로 개선이 필요할 거 같긴 한데
현재 코드 흐름이 어떻게 되는 지 파악하는데 집중하고 있다

학습 효과 분석

아직은 잘 모르겠다 좀 더 공부를 해야 할 거 같다

과제 피드백

코드파악하는데 어려움이 있어 어느 부분을 피드백을 받아야 할지도 감이 안오는 거 같다;

학습 갈무리

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

state나 props가 변경되면
현재의 돔을 가상돔으로 만든 후 이전에 만든 가상돔과 비교하여(diffing)
바뀐 부분만 실제 DOM에 반영하여 렌더링이 이루어진다

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

메모이제이션은 어차피 계산 결과는 똑같은데 렌더링 과정에서 불필요하게 계산이 이뤄지는 로직으로 인해
성능 저하를 유발하여 사용자 체감이 나빠지는 걸 방지하기 위해 꼭 필요한 과정이라고 생각한다
하지만 너무 남발해서 쓰게되면 코드도 복잡해지고 메모리 낭비도 심해질 거 같다

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

리뷰 받고 싶은 내용

[parksangsoo]

[parksangsoo]

과제는 다 했는데 뭔가 오류가 나서 증거 스크린샷 첨부하겠습니다