Context API 리랜더링 방지를 위한 Memoization에... - 인프런

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

Context API 리렌더링

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

작성

계속해서 학습을 진행중인데, 함수값을 넘길때에는 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을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.

react react-router redux-toolkit zustand react.js

답변 2

수코딩

지식공유자

안녕하세요.

메모이제이션의 핵심은 “전달되는 데이터를 캐싱한다”는 점입니다.

예를 들어, 어떤 함수를 다른 컴포넌트로 넘겨주면서 매번 새로 생성되지 않도록 하고 싶다면, useCallback을 사용해 함수를 메모이제이션해야 합니다.

반면 Context API는 결국 value={{...}} 형태로 객체를 다른 컴포넌트에 전달합니다. 이때 전달하는 객체를 메모이제이션하고 싶다면 useMemo를 사용해야 합니다. 객체는 참조값이므로 함수가 포함되어 있더라도 상관없이 객체 자체를 메모이제이션하는 것이 중요합니다.

즉, 전달하려는 값이 무엇이든 “그 값 자체를 메모이제이션한다”는 것이 핵심 원리입니다. 🙂

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. songso96님.

Context API 사용 시, 함수형 컴포넌트를 전달하기 위해 useCallback과 useMemo를 활용하여 리렌더링을 방지하는 방법에 대해 질문을 주셨는데요. 각 방식이 언제 더 효과적인지 궁금하신 것 같습니다.

두 방법의 차이점과 추천 방식:

useCallback 사용:
- useCallback은 특정 함수가 호출되는 빈도를 줄이기 위해 사용됩니다. 즉, 의존성 배열이 변경되지 않는 한, 이미 생성된 함수를 재사용함으로써 불필요한 함수 재생성을 방지할 수 있습니다.
- 이는 함수가 콜백으로 사용되거나, 자주 변경되어서는 안 되는 상황에서 유용합니다.
useMemo 사용:
- 함수들을 객체로 묶어 한꺼번에 전달하는 경우, useMemo를 사용하는 접근 방식도 효율적입니다. 이 방법은 함수들을 그룹화하여 객체로 일관되게 관리할 수 있습니다.
- useMemo는 생성된 객체가 의존성 배열에 의해 데이터 변화를 감지해야 하는 상황에서 특히 효과적입니다.

효율적 사용:

함수가 개별적으로 필요하다면 useCallback을 사용하여 필요할 때만 함수 인스턴스를 생성하도록 하는 것이 좋습니다.
여러 개의 함수를 객체로 묶어 전달해야 하거나, 객체 전체가 자주 업데이트되지 않아야 한다면 useMemo를 활용하여 묶음 객체를 캐싱하는 전략이 유용합니다.

이와 관련된 추가적인 학습을 도와드릴 수 있는 참고 링크를 아래에 추천드립니다:

React의 useCallback과 useMemo 차이점과 사용 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

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

두 방법의 차이점과 추천 방식:

효율적 사용: