useCallback, useMemo의 차이에 대해서 궁금합니다.
[셀렉트박스 (3/5) headless #2 hook 적용] 부분에서 getTriggerProps/getListProps 처럼 각 컴포넌트가 필요한 것들을 useCallback으로 감싸고 함수형태로 제공해주셨는데요, 아래처럼 useMemo를 이용해서 객체에 값을 담아서 전달해주는 방식은 다른 걸까요??
const getTriggerProps = useCallback(
() => ({
selectedItem: items[selectedIndex],
toggle,
}),
[selectedIndex, items, toggle]
);
const TriggerpropsValue = useMemo(() => {
return {
selectedItem: items[selectedIndex],
toggle,
};
}, [items, selectedIndex, toggle]);답변 1
1
경우에 따라 다를 것 같습니다만, 제가 이해하기로는
headless 컴포넌트 적용시에 useMemo가 아닌 useCallback을 적용하는 이유는
컴포넌트간의 렌더링 간섭을 최소화하기 위함이 클 것 같습니다.
const useDropdown = () => {
...
return { getContainerProps, getTriggerProps, ... }
}
const Dropdown = () => {
const { getContainerProps, getTriggerProps } = useDropdown()
return (
<DDContainer {...getContainerProps()}>
<DDTrigger {...getTriggerProps()} />이렇게 각각의 컴포넌트에 넘겨줄 대상을 함수 호출로 해두면getContainerProps의 내용이 변경되더라도 getTriggerProps에는 영향을 주지 않을 것입니다.
반면 각각을 useMemo로 만들 경우에는,
const useDropdown = () => {
...
return { handleKeyDown, selectedItem, toggle, ... }
}
const Dropdown = () => {
const { handleKeyDown, selectedItem, toggle } = useDropdown()
return (
<DDContainer handleKeyDown={handleKeyDown}>
<DDTrigger selectedItem={selectedItem} toggle={toggle} />이렇게 되어서, handleKeyDown, selectedItem, toggle 중 어느 하나만 변경되더라도
모든 컴포넌트가 재렌더링될 것 같습니다.
혹은 다음과 같이 할 수도 있겠는데요,
const useDropdown = () => {
...
return { containerProps, triggerProps }
}
const Dropdown = () => {
const { containerProps, triggerProps } = useDropdown(data)
return (
<DDContainer {...containerProps}>
<DDTrigger {...triggerProps} />이 경우에는 테스트 해보니 괜찮네요.
다만 테스트하면서 보니, getItemProps의 경우에는 파라미터를 전달해야 해서 useCallback을 쓸 수밖에 없더군요.
결론은,
파라미터를 전달해야 하는 경우와 그렇지 않은 경우를 나누어
useCallback/useMemo를 구분 적용하는 것도 괜찮고,파라미터 필요성을 염두에 두어 일관되게
useCallback만 사용하는 방법도 좋을 것 같습니다.
0
상세한 설명 감사합니다. useCallback과 useMemo의 차이가 메모이제이션 할 값이 함수인지/값인지 여부로 알고있었는데, 강의의 경우에서 함수를 통해 그저 값만 반환하는 것 같아서 useCallback/useMemo가 갑자기 혼란스러웠는데, 이 경우에는 파라미터를 염두하기 위해 useCallback을 쓰는 것이군요. 답변 감사합니다!😊
챌린지 시작일 문의
0
12
0
17강 강의에 목데이터 첨부파일이 없습니다.
1
12
1
줄바꿈 시 \ 필수인가요?
0
14
2
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
11
2
커리큘럼 문서 제공받을 수 있을까요?
0
19
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
13
1
인덱스드 엑세스타입 실무질문
0
13
2
mission 09-01 을 수행할 수 없어요
0
20
1
outputStyle 설정하는데 어디서 문제일까요?
0
21
3
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
13
2
검은화면
0
22
3
강의교환링크안열려요.....
0
22
2
제네릭을 사용하실 때 콤마
0
186
2
popover createPortal 방식에서
0
177
2
스낵바를 만들 때 snackBarContext와 snackBarSetContext
0
173
2
snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?
0
209
1
createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문
0
384
3
강의자료 (보일러플레이트) 다운로드 관련 질문
0
280
1
모달만드는 방식 질문
0
263
1
캐러셀 동작원리
0
329
2
dropdown 내부에서 data의 타입을 알아야 할까요?
0
222
1
Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?
0
306
2
keyEventMap를 전역에 구현하신 이유가 궁금합니다!
0
291
2
테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다
1
332
2