• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

useCallback 의 Memoization 값 저장 방식은 참조가 아닌가요?

23.09.30 15:36 작성 조회수 295

0

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://velog.io/@katanazero86/React-%EC%97%90%EC%84%9C-%EB%B3%BC-%EC%88%98-%EC%9E%88%EB%8A%94-%ED%81%B4%EB%A1%9C%EC%A0%80Closure

https://itchallenger.tistory.com/629

빠른 답변과 좋은 링크 감사드립니다.
보내주신 아티클을 바탕으로 좀 더 공부해보니 React 에서 State를 Immutable로 관리한다는 점을 알게 됐네요. 정확한지 모르겠지만 함수 Closure와 더불어 Immutable 객체로 인해 이전 상태 값을 가지고 있을 수 있는 것으로 이해되네요. 덕분에 React에 대해 깊게 알아가는 것 같습니다. 감사합니다!