useCallback 의 Memoization 값 저장 방식은 참조가 아닌가요?
const onCreate = useCallback((author, content, emotion) => {
const created_date = new Date().getTime();
const newItem = {
author,
content,
emotion,
created_date,
id: dataId.current,
};
dataId.current += 1;
setData([newItem, ...data]); // initial state인 data = [] 로 인한 문제
}, []);
강의 중에서 useCallback 에서 data 값 갱신 문제에 질문이 있습니다.
우선, data 가 일반적인 값 참조처럼 일어나지 않는다는 점을 이해했습니다. 가장 마지막에 onCreate 가 업데이트되는 시점의 data 값을 기억해 두고 사용한다는 점도 이해했습니다.
그런데 왜 이렇게 동작하는지 궁금합니다. 구체적으로 말하면 Memoization이 어떻게 구현됐기에 이런 문제가 발생하는 건가요? 이전 값을 그대로 가지고 있으려면 단순히 참조 주소를 복사하는 식으로는 안 되고 Deep Copy가 일어나야 하지 않나요?
그리고 Deep Copy를 통해 Memo를 구현했다기에는 석연치 않은 부분들도 있습니다. 우선 매번 Deep Copy를 수행하는 식으로 Memo를 구현했다면 성능 문제가 발생하지 않을까요? 게다가 depth에서는 Shallow Compare 가 일어나니까 Deep Copy를 통해 구현하지는 않았을 것 같습니다.
이전 상태를 기억해 둔다는 방식은 이전 상태에 state 변수들을 내부에 따로 복사해서 저장해 둔다는 개념으로 이해되는데, 제가 예상하는 대로 Deep Copy를 통해 이전 값을 저장해 두는 건지 아니면 제가 놓친 부분이 있는지 궁금합니다.
답변 1
1
안녕하세요 이정환입니다.
먼저 깊은 수준의 질문 감사합니다 👍👍👍
useCallback이 그렇게 동작하는 이유는 useCallback 을 포함한 대다수의 리액트 Hooks는 JS의 Closure(클로저)를 활용해 구현되었고 동작하기 때문입니다.
클로저 또는 클로저를 이용한 Hooks들의 동작 원리에 대한 자세한 설명은 다음의 추천 아티클들을 확인해보시는것을 추천드립니다!
https://dev.to/wesamalqawasmeh/react-usecallback-and-js-function-closure-2h8c
https://itchallenger.tistory.com/629
1
빠른 답변과 좋은 링크 감사드립니다.
보내주신 아티클을 바탕으로 좀 더 공부해보니 React 에서 State를 Immutable로 관리한다는 점을 알게 됐네요. 정확한지 모르겠지만 함수 Closure와 더불어 Immutable 객체로 인해 이전 상태 값을 가지고 있을 수 있는 것으로 이해되네요. 덕분에 React에 대해 깊게 알아가는 것 같습니다. 감사합니다!
useEffect와 lifecycle문의
0
36
2
프론트엔드 학습 수준 문의
0
48
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
53
2
데이터 로딩중 화면만 계속 나와요!!
0
57
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
84
2
이후의 커리큘럼 문의
0
104
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
53
2
최적화 관련 질문있습니다 (useMemo 등)
0
86
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
87
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
110
2
onMouseEnter 관련 문의 드립니다
0
93
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
114
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
138
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
119
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
186
2
87강 필터 함수 질문
0
71
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
92
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
77
2





