useCallback ⊂ useMemo

Question

안녕하세요. useMemo와 useCallback이라는 리액트 훅을 함께 공부하다 보니 궁금한 점이 생겨서 질문하려고 합니다. useMemo()의 아규먼트로 전달한 콜백함수의 반환값이, useCallback()의 첫 번째 아규먼트로 전달하려는 콜백함수가 된다면 useMemo()가 useCallback()을 완전히 대체할 수 있는 것 아닌가요? 2-1. 위의 예측이 아니라면 useCallback()만의 독자적인 기능이 존재하는지 그리고 그것이 무엇인지 궁금합니다. 2-2. 위의 예측이 맞다면 굳이 useCallback()과 useMemo()를 나눈 이유가 무엇인지 궁금합니다. (콜백함수 내부에서 새로운 함수를 정의하고 반환하는 더러운 구조를 용납(?)하지 않기 위해서인가요..?)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. ikv님. 질문하신 내용처럼 useCallback 은 개념적으로 다음과 같이 useMemo 로 대체할 수 있습니다. const memoizedFunction = useMemo(() => { return someFunction; }, [dependencies]); 즉, useCallback(someFunction, dependencies) 는 다음 코드와 동일한 의미로 볼 수 있습니다. useMemo(() => someFunction, dependencies); 다만 두 훅의 목적과 표현 방식이 다릅니다. useMemo : 연산 결과나 객체 등 값을 메모이제이션 useCallback : 함수 자체를 값으로 보고 함수의 참조(identiy)를 메모이제이션 예를 들어 Context의 value 에 여러 함수를 담은 객체를 전달하는 경우에는 다음과 같이 useMemo 를 사용합니다. const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 이때 메모이제이션하는 대상은 각 함수가 아니라, 세 함수를 담은 객체 입니다. 반면 특정 함수를 자식 컴포넌트의 Props로 전달하면서 함수의 참조가 매번 바뀌지 않도록 하려면 useCallback 을 사용하는 것이 의도를 더 명확하게 표현합니다. 따라서 useCallback 만의 완전히 독립적인 기능이 있다기보다는, 함수 메모이제이션을 위한 편의 문법이자 의도를 명확히 드러내는 API라고 이해하시면 좋습니다. useMemo(() => fn, deps) 로 대체할 수 있지만, 함수를 메모이제이션한다는 목적에는 useCallback 을 사용하는 편이 가독성과 유지보수 측면에서 적절합니다. 관련해서 다음 기존 답변도 함께 참고해 보시면 좋습니다. Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다. useMemo 는 함수를 캐싱하는 것이 아니라, 함수들을 묶은 객체와 같은 특정 값을 캐싱한다는 점을 설명하고 있습니다. useCallback 최적화 질문입니다. useCallback 을 모든 함수에 무조건 적용하기보다는, 함수가 Props로 전달되어 불필요한 리렌더링을 유발하는 경우처럼 실제 최적화가 필요한 상황에 사용하는 것이 좋다는 내용입니다. context 강의를 들으면서 이해가 안가는 부분이 있습니다. Context의 value 로 객체를 전달할 때 useMemo 와 useCallback 을 어떤 기준으로 사용할지에 대한 설명을 확인할 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.