React Academy · 강의

useMemo로 컨텍스트 값 메모이제이션하기

컨텍스트 값 객체를 useMemo로 감싸 불필요한 소비자 다시 렌더링을 방지합니다.

레슨 2/413개 단계

useMemo로 컨텍스트 값 메모이제이션하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 레슨에서는 컨텍스트 값 객체를 useMemo로 메모이제이션해야 하는 이유와 불필요한 재렌더링을 방지하도록 의존성을 올바르게 설정하는 방법을 배웁니다.

객체 참조 문제

Provider 컴포넌트가 재렌더링될 때마다 내용이 같더라도 새로운 객체 리터럴 `{ ... }`이 컨텍스트 값으로 생성됩니다. 참조가 변경되었기 때문에 모든 소비자가 재렌더링됩니다.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

useMemo로 해결하기

컨텍스트 값을 useMemo로 감싸면 의존성 배열의 값이 변경되지 않은 렌더링 사이에서는 동일한 객체 참조가 반환됩니다.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

의존성 신중하게 선택하기

useMemo 내부에서 사용하는 모든 값을 의존성 배열에 포함합니다. 의존성이 누락되면 오래된 값이 사용됩니다. 기본형 props(문자열, 숫자)와 안정적인 참조(useCallback으로 감싼 함수)를 포함하십시오.

useCallback으로 안정적인 함수 만들기

함수 값은 렌더링할 때마다 참조가 변경됩니다. 불필요한 재렌더링을 방지하려면 useMemo 컨텍스트 값에 포함하기 전에 useCallback으로 감싸십시오.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

메모이제이션이 필요하지 않은 경우

Provider 컴포넌트가 재렌더링되지 않는다면(예: 트리 최상단에 있고 부모가 변경되지 않는 경우) useMemo는 이점 없이 추가 비용만 발생시킵니다. Provider 자체가 재렌더링될 때만 메모이제이션하십시오.

기본형 값은 이미 안정적입니다

컨텍스트 값이 기본형(문자열, 숫자, 불리언)이라면 useMemo가 필요하지 않습니다. 기본형은 참조가 아니라 값으로 비교됩니다. `value={isDark}`는 추가 재렌더링을 일으키지 않습니다.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

메모이제이션 효과 프로파일링

React DevTools Profiler를 사용해 컨텍스트 값을 useMemo로 감싸는 것이 실제로 재렌더링을 줄이는지 확인합니다. 적용 전후의 세션을 기록해 커밋 횟수의 차이를 확인하십시오.

중첩된 메모이제이션 컨텍스트

여러 컨텍스트가 중첩되어 있을 때는 각각을 독립적으로 메모이제이션합니다. 한 컨텍스트의 변경은 다른 컨텍스트의 메모이제이션된 값에 영향을 주지 않습니다.

Provider 컴포넌트 패턴

전용 Provider 컴포넌트 내부에 컨텍스트, 상태, 메모이제이션을 캡슐화합니다. 컨텍스트를 사용하는 사용자 정의 훅을 내보냅니다. 이는 재사용 가능한 컨텍스트를 위한 표준 패턴입니다.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

빠른 확인

컨텍스트 값 객체를 useMemo로 감싸는 가장 중요한 이유는 무엇입니까?

인터랙티브 레슨에서 답해보세요

복습

올바른 의존성과 함께 컨텍스트 값 객체를 useMemo로 감쌉니다. useCallback으로 함수 값을 안정화합니다. 기본형에는 메모이제이션이 필요하지 않습니다. 사용자 정의 훅을 사용하는 Provider 컴포넌트에 컨텍스트 설정을 캡슐화합니다.

다음 학습

다음 레슨: **컨텍스트 선택자 패턴** — 특정 컨텍스트 조각이 변경될 때만 소비자를 재렌더링하는 선택자 훅을 구현합니다.

무료로 시작

AI 튜터와 함께 React을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 88
레슨: 324

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“useMemo로 컨텍스트 값 메모이제이션하기” 강의는 무료인가요?

네 — “useMemo로 컨텍스트 값 메모이제이션하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“useMemo로 컨텍스트 값 메모이제이션하기”에서 뭘 배우나요?

컨텍스트 값 객체를 useMemo로 감싸 불필요한 소비자 다시 렌더링을 방지합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“useMemo로 컨텍스트 값 메모이제이션하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기