[React] Context 외부에서 데이터를 사용하려 할 때의 에러 처리, useContext

 

 

💡 감싸지지 않은 컴포넌트에서 "useContext" 훅을 사용하려고 할 때 발생하는 에러를 처리해보자.

 

✔️ 컨텍스트 프로바이더 확인하기

특정 컴포넌트에서 useContext 를 사용할 때 해당 컴포넌트가 Context.Provider 로 감싸져 있는지 확인한다.

Provider 컴포넌트로 감싸지지 않았다면, 컨텍스트 데이터를 가져올 수 없다.

 

• 장점 : 특정 컴포넌트에서 사용될 때만 확인하기 때문에 특정한 컴포넌트와 관련된 에러 메시지 제공 가능.
• 단점 : 컨텍스트를 사용하는 모든 컴포넌트마다 동일한 검사 반복 필요

 

import React, { createContext, useContext } from 'react';

// Context 생성
const MyContext = createContext();

const MyComponent = () => {
  const contextValue = useContext(MyContext);

  if (!contextValue) {
    throw new Error('MyComponent must be used within a MyContext.Provider');
  }

  return <div>{contextValue}</div>;
};

// Context.Provider로 감싸기
const App = () => {
  return (
    <MyContext.Provider value="Hello, World!">
      <MyComponent />
    </MyContext.Provider>
  );
};

 

✔️ 커스텀 훅에서 예외 처리하기

useContext 를 사용하는 커스텀 훅을 작성할 때,

해당 훅이 Provider 내부에서 호출되었는지 확인하고, 그렇지 않은 경우 명시적인 에러 메세지를 던진다.

• 장점 : useMyContext 를 사용하기만 하면 컨텍스트 관련 오류 처리가 일관되게 이루어짐. 훅을 사용하는 모든 컴포넌트에서 동일한 오류 메시지를 받을 수 있어 관리가 편함.
• 단점 : 커스텀 훅을 통해서만 접근해야 하므로, 훅을 사용하지 않고 useContext를 직접 사용할 때는 이 방식이 적용되지 않음.

// 커스텀 훅 정의
const useMyContext = () => {
  const context = useContext(MyContext);
  
  if (context === undefined) {
    throw new Error('useMyContext must be used within a MyContext.Provider');
  }

  return context;
};

// MyComponent에서 사용
const MyComponent = () => {
  const contextValue = useMyContext();
  
  return <div>{contextValue}</div>;
};