Context API 리랜더링 방지를 위한 Memoization에 대한 질문

Question

계속해서 학습을 진행중인데, 함수값을 넘길때에는 useCallback을 사용해야한다는 것으로 알고있었는데, >>밑에는 실제 강의 중 공유해 주신 ContextProvider 안에 함수들 const increment = () => { setCount((count) => count + 1); }; const decrement = () => { setCount((count) => count - 1); }; const reset = () => { setCount(0); }; const memoization = useMemo(()=>({ increment, decrement, reset }),[]); >>제가 생각했던 방식 const increment = useCallback(() => { setCount((count) => count + 1); },[]); const decrement = useCallback(() => { setCount((count) => count - 1); },[]); const reset = useCallback(() => { setCount(0); },[]); const memoization = useMemo(()=>({ increment, decrement, reset }),[increment, decrement, reset]); 저는 밑에 memoization 변수를 빼고 바로 useCallback을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.

수코딩 · Answer

안녕하세요. 메모이제이션의 핵심은 “전달되는 데이터를 캐싱한다” 는 점입니다. 예를 들어, 어떤 함수를 다른 컴포넌트로 넘겨주면서 매번 새로 생성되지 않도록 하고 싶다면, useCallback 을 사용해 함수를 메모이제이션해야 합니다. 반면 Context API 는 결국 value={{...}} 형태로 객체를 다른 컴포넌트에 전달합니다. 이때 전달하는 객체를 메모이제이션하고 싶다면 useMemo 를 사용해야 합니다. 객체는 참조값이므로 함수가 포함되어 있더라도 상관없이 객체 자체를 메모이제이션하는 것이 중요합니다. 즉, 전달하려는 값이 무엇이든 “그 값 자체를 메모이제이션한다”는 것이 핵심 원리 입니다. 🙂

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. songso96님. Context API 사용 시, 함수형 컴포넌트를 전달하기 위해 useCallback 과 useMemo 를 활용하여 리렌더링을 방지하는 방법에 대해 질문을 주셨는데요. 각 방식이 언제 더 효과적인지 궁금하신 것 같습니다. 두 방법의 차이점과 추천 방식: useCallback 사용 : useCallback 은 특정 함수가 호출되는 빈도를 줄이기 위해 사용됩니다. 즉, 의존성 배열이 변경되지 않는 한, 이미 생성된 함수를 재사용함으로써 불필요한 함수 재생성을 방지할 수 있습니다. 이는 함수가 콜백으로 사용되거나, 자주 변경되어서는 안 되는 상황에서 유용합니다. useMemo 사용 : 함수들을 객체로 묶어 한꺼번에 전달하는 경우, useMemo 를 사용하는 접근 방식도 효율적입니다. 이 방법은 함수들을 그룹화하여 객체로 일관되게 관리할 수 있습니다. useMemo 는 생성된 객체가 의존성 배열에 의해 데이터 변화를 감지해야 하는 상황에서 특히 효과적입니다. 효율적 사용: 함수가 개별적으로 필요하다면 useCallback 을 사용하여 필요할 때만 함수 인스턴스를 생성하도록 하는 것이 좋습니다. 여러 개의 함수를 객체로 묶어 전달해야 하거나, 객체 전체가 자주 업데이트되지 않아야 한다면 useMemo 를 활용하여 묶음 객체를 캐싱하는 전략이 유용합니다. 이와 관련된 추가적인 학습을 도와드릴 수 있는 참고 링크를 아래에 추천드립니다: React의 useCallback과 useMemo 차이점과 사용 방법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.