Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다.

Question

안녕하세요. 리액트 초보입니다. 이해하기 쉽게 설명해주셔서 감사합니다.

11.3) Context 분리하기 강의 약 7분 쯤에서 궁금한 부분이 있어서 질문 남깁니다.

<TodoDispatchContext.Provider> 를 통해 context를 전달할 때, 함수를 캐싱하기 위해 강의에서는 아래와 같이 useMemo를 사용해주셨는데요!

const memoizedDispatch = useMemo(() => {
  return { onCreate, onUpdate, onDelete };
}, []);

우선 최적화하고자 한 이유는 아래와 같다고 이해했습니다.

onCreate, onUpdate, onDelete 모두 한 번 생성한 후에 바뀌지 않는 함수로, TodoDispatchContext를 참조하는 자식 컴포넌트들의 리렌더링 방지

그리고 useMemo를 사용하신 부분에서는 마운트 후 onCreate, onUpdate, onDelete는 변하지 않는 함수 이므로 "값을 캐싱한다"는 의미에서 useMemo를 사용해주셨다고 이해했습니다.
다만 useCallback도 mount 후 deps 변경 전에는 함수의 중복 생성을 방지한다는 점에서는 useCallback을 사용해도 좋을 것 같단 생각이 들었는데요,

결론적으로 제가 궁금한 부분은 아래와 같습니다.

useMemo 대신 useCallback을 사용해서도 동일하게 최적화 할 수 있다고 이해했는데, 제가 이해한 게 맞을까요?
1번이 맞다면 강의에서 useMemo를 사용해주신 이유는 캐싱하기 위함(의도)을 표현하기 위함이라고 이해하면 될지도 궁금합니다! 실무에서는 useMemo와 useCallback을 모두 사용할 수 있는 경우 어떤 훅을 선택하시는지, 강의에서 useMemo를 통해 캐싱하신 이유가 궁금했습니다 !

블로그를 찾아봐도 잘 이해가 되지 않아서 질문으로 남깁니다! 답변 주시면 감사하겠습니다!

slothbear.hj · Answer

답변 감사드립니다!

그렇잖아도 미션 풀면서 뭔가 이상하다 싶었는데 함수를 캐싱한 것이 아니더라고요.........하하 ㅎㅎㅎㅎ 감사합니다.

도움이 많이 되었습니다.

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

우선 useMemo는 함수를 캐싱하지 않습니다. 함수의 캐싱은 useCallback이 담당하고, useMemo는 강의에서 말씀드렸듯 어떠한 연산의 결과값을 캐싱합니다.

따라서 아래의 코드에서 캐싱 되는 대상은 onCreate, onUpdate, onDelete 각자의 함수가 아니라, 이 3개의 함수를 묶은 "객체 값" 입니다. 객체가 다시 생성되지 않도록 캐싱하는 거라고 이해하시면 됩니다.

const memoizedDispatch = useMemo(() => {
  return { onCreate, onUpdate, onDelete };
}, []);

PS. 참고로 함수의 캐싱이란, 함수의 연산 결과를 저장하는 것을 말하는것이 아닙니다! 함수 자체가 컴포넌트 내부에서 재생성되지 않도록 방지하는 것을 함수의 캐싱이라고 표현합니다.

인프런 커뮤니티 질문&답변

Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다.