[6팀 조영민] Chapter 1-3. React, Beyond the Basics#43
[6팀 조영민] Chapter 1-3. React, Beyond the Basics#430miiii wants to merge 4 commits intohanghae-plus:mainfrom
Conversation
There was a problem hiding this comment.
오 every()를 사용하셨네요 ! 전 for 루프를 통해 구현했는데 이 방법도 잘 알아갑니다. ㅎㅎ
There was a problem hiding this comment.
useRef를 사용하면 인스턴스별로 props 상태를 안전하게 유지할 수 있을 것 같아요.
There was a problem hiding this comment.
initialized로 초기 렌더 여부를 명시해준 점이 가독성과 추후 유지보수에 도움이 될 것 같네요.
| export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T { | ||
| // 직접 작성한 useRef를 통해서 만들어보세요. | ||
| return factory(); | ||
| const ref = useRef<{ | ||
| deps: DependencyList; | ||
| value: T | undefined; | ||
| initialized: boolean; | ||
| }>({ | ||
| deps: [], | ||
| value: undefined, | ||
| initialized: false, | ||
| }); | ||
|
|
||
| if (!ref.current.initialized || !_equals(ref.current.deps, _deps)) { | ||
| ref.current.value = factory(); | ||
| ref.current.deps = _deps; | ||
| ref.current.initialized = true; | ||
| } |
There was a problem hiding this comment.
value의 초기값으로 factory 함수를 넣게 된다면 initialized 값이 없어져도 되지않을까 생각이 듭니다.
영민님은 어떻게 생각하시나요?!
|
LGTM!!!!!! |
| @@ -0,0 +1,3 @@ | |||
| export const isObject = (value: unknown): value is Record<string, unknown> => { | |||
| return typeof value === "object" && value !== null && !Array.isArray(value); | |||
| }; | |||
There was a problem hiding this comment.
isObject를 별도의 메소드 없이 직접 구현하셨는데 엣지 케이스가 존재할 수 있을 것 같아요! 이 부분 리팩토링 하실 떄 한번 더 생각해 보시는 건 어떨까요??
| } | ||
|
|
||
| return a === b; | ||
| }; |
There was a problem hiding this comment.
1depth 비교만 해도 충분한 함수 또는 객체가 재귀적으로 deepEquals 함수로 호출될 것 같은데, 성능최적화를 고려해서 1depth일 때는 early return 또는 shallowEquals 함수로 비교하고, 2depth 이상 일 때만 재귀적으로 deepEquals 함수를 호출하는 방안으로 추후 개선해보시면 어떨까요~?
6 participants
과제 체크포인트
https://0miiii.github.io/front_6th_chapter1-3/
배포 링크
기본과제
equalities
hooks
High Order Components
심화 과제
hooks
context
과제 셀프회고
기술적 성장
자랑하고 싶은 코드
개선이 필요하다고 생각하는 코드
학습 효과 분석
과제 피드백
학습 갈무리
리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.
메모이제이션에 대한 나의 생각을 적어주세요.
컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.
리뷰 받고 싶은 내용
useMemo 등 memoization을 수행하는 hook들을 사용하는 기준이 궁금합니다.
재렌더링이 필요없는 컴포넌트의 렌더링을 막기 위해 이 hook들을 모든 순간에 사용하게 되면 오히려 성능에 안좋은 영향을 미친다고 들었습니다. 복잡한 계산이 있는 곳에 사용하는 것을 권장하는데 복잡한 계산의 기준을 명확하게 모르겠습니다.
지금까지 일을 해오면서 눈에 띄게 렌더링 속도가 느렸던 컴포넌트가 있는데 이 때 useMemo를 사용해서 값이 확실히 변할때만 렌더링되도록 개선했었던 적이 있습니다. 이처럼 체감이 될 정도로 성능이 안좋은게 느껴질 때만 memoization을 사용하는 것을 고려하면 될까요?
성능 저하가 체감되지 않는다면 재렌더링이 여러번 발생하더라도 굳이 사용할 필요가 없을지 궁금합니다.