[6팀 정용준] Chapter 1-3. React, Beyond the Basics#40
[6팀 정용준] Chapter 1-3. React, Beyond the Basics#40dkile wants to merge 19 commits intohanghae-plus:mainfrom
Conversation
There was a problem hiding this comment.
utils로 타입 유틸 함수들을 잘 분리해두셔서 전체적인 가독성과 재사용성이 좋아진 것 같아요!
There was a problem hiding this comment.
용준님이 구현하신 memo를 통해서 deepmemo를 간단하게 구현하는 방법으로 수정하면 좋을 것 같아요.
저도 처음에 이렇게 작성했다가 수정했어요.
There was a problem hiding this comment.
useToastCommand 와 useToastState 안에서도 useMemo 처리를 해주신 이유가 궁금합니다.
| const memoized = useRef<T | undefined>(undefined); | ||
| const prevDeps = useRef(deps); | ||
| const isInitial = useRef(true); | ||
|
|
||
| if (isInitial.current || !_equals(prevDeps.current, deps)) { | ||
| isInitial.current = false; | ||
| memoized.current = factory(); | ||
| prevDeps.current = deps; | ||
| } |
There was a problem hiding this comment.
memoized가 undefined 값이면 최초 렌더링 값이지 않을까요?
isInitial 제거하는 방향은 어떠신가요?
There was a problem hiding this comment.
useMemo에서 undefined를 반환하면 실제 리액트에서는 아마 에러가 날텐데 일단 factory에도 undefined를 반환하는 경우를 생각해서 isInitial.current로 체킹하고 있어요. 반환값이 undefined면 아무래도 순수한 로직이 아니라는 뜻일테니 isInitial을 지우고 factory 반환값이 undefined면 에러를 뱉도록 하는게 더 맞는 것 같네요.
|
|
||
| export const isArray = (value: unknown): value is unknown[] => Array.isArray(value); | ||
|
|
||
| export const isObject = (value: unknown): value is object => typeof value === "object" && value !== null; |
There was a problem hiding this comment.
객체를 판단하는 로직에서 엣지 케이스가 있을 것 같아요!
엣지 케이스에서 이 로직을 통과하면 getObjectKeys 함수 내부에서 런타임 에러가 발생할 수 있을 것 같은데, 이 부분 조금 더 고민해보면 어떨까요??
There was a problem hiding this comment.
민재님 말씀대로 Plain object로 의도하고 작성해야겠네요.
isArray가 앞에 있어서 배열 정도는 걸러준다고 생각했는데 그렇게 되면 isObject는 isArray에 의존성을 갖게 돼요. 이거도 문제네요.
독립적인 함수로 보고 Regex나 Function과 같은 엣지 케이스도 잡는게 좋아보입니다.
혹시 제가 얘기한게 민재님 리뷰의 의도와 맞을까요?
|
LGTM!!!!!!!!!!!!!!!! |
| return prevResultRef.current!; | ||
| } | ||
|
|
||
| const result = Component(props); |
There was a problem hiding this comment.
이 부분에서 prevReulstRef.current를 return 시키지 않고 result를 return 시키시는 이유가 궁금합니다!
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export function isFunction(value: any): value is (...args: any[]) => any { | ||
| return typeof value === "function"; | ||
| } |
There was a problem hiding this comment.
util 파일로 함수화시켜서 적용하신 것 정말 좋네요! 저도 이렇게 별도 파일을 생성해서 가독성을 높여 리팩토링 해봐야겠습니다. 👍
5 participants
과제 체크포인트
배포 링크
https://dkile.github.io/front_6th_chapter1-3/
기본과제
equalities
hooks
High Order Components
심화 과제
hooks
context
과제 셀프회고
결국 참조와 호출 시점의 문제가 대부분이고 로직 상 어려운 포인트는 없어서 과제를 수행하는데에 어려움은 없었습니다. 직접 만들어보니 그냥 재밌었어요. useAutoCallback 같은 훅들을 더 생각해내고 만들어보고 싶습니다.
기술적 성장
useAutoCallback이란 훅을 처음 접했는데 아주 맛도리인 것 같아요. 사소한 부분이지만 지속적으로 사용이 가능한 그런 훅인데 useCallback에 사로잡혀 리액트 공식 문서만 읽던 저에게 큰 충격이었습니다.
자랑하고 싶은 코드
개선이 필요하다고 생각하는 코드
학습 효과 분석
과제 피드백
학습 갈무리
리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.
메모이제이션에 대한 나의 생각을 적어주세요.
컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.
리뷰 받고 싶은 내용
피드백이라기 보다 한가지 궁금한 점이 생겨 질문 드립니다.
react에서 의도한 동작을 하기 위해 dependency array에 의존성을 빼는 경우가 종종 있습니다. react에서 권장하는 사항은 dependency array에 모든 의존성을 추가하는 것인데 코드를 작성하면서 이런 부분이 머리 속에서 자꾸 충돌이 나네요..
코치님은 어떻게 하시나요? 저는 이전에는 무조건 추가하는게 향후에 버그를 줄일 수 있다는 생각이었는데 점차 어쨋거나 의도한 동작을 하는게 우선이다로 바뀌고 있어요.