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에 대해 깊게 알아가는 것 같습니다. 감사합니다!
Editor Component의 최적화 불가능 이슈
0
60
2
useCallback ⊂ useMemo
0
47
2
라이브러리 설치 질문
0
57
2
linter 질문
0
59
2
감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유
0
59
2
Sort 메서드 관련 아티클
0
62
2
4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.
0
56
2
html, body에 적용하는 css 스타일 질문입니다.
0
62
2
eslint.config.js 설정 질문입니다.
0
102
2
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
74
1
교재(3쇄)와 강의 내용 문의
0
76
2
12.13) 하단 여백 스타일링 관련 질문 드립니다.
0
101
2
에러 질문드립니다
0
116
2
VSCode 설정 문의
0
151
2
PPT 코드 관련 질문
0
74
2
useEffect와 lifecycle문의
0
95
2
프론트엔드 학습 수준 문의
0
113
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
117
2
데이터 로딩중 화면만 계속 나와요!!
0
110
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
140
2
이후의 커리큘럼 문의
0
162
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
122
2
최적화 관련 질문있습니다 (useMemo 등)
0
137
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
131
3





