[React] context와 custom hook 어떤 것을 사용해야 할까?

리액트 context와 custom hook의 기능 구분

리액트에서 커스텀 훅과 컨텍스트를 구분해서 사용해야 하는 경우에는 목적과 요구사항을 분석하여 어떤 기능이 더 적합한지 판단해야 합니다.

로직 재사용: 커스텀 훅

1. 커스텀 훅은 로직의 재사용에 초점을 맞춥니다.
2. 여러 컴포넌트에서 동일한 로직이 필요한 경우, 이를 커스텀 훅으로 분리하여 사용합니다.
3. 특정 상태 관리나, 이벤트 핸들러 등을 여러 곳에서 사용해야 할 때 유용합니다.

전역 상태 공유: 컨텍스트

1. 컨텍스트는 데이터의 전역 공유에 초점을 맞춥니다.
2. 전체 애플리케이션 또는 특정 컴포넌트 트리에서 공통으로 접근해야 하는 데이터가 있는 경우 사용합니다.
3. 상위와 하위 컴포넌트 간에 직접적인 props 전달 없이 데이터를 공유해야 할 때 유용합니다.

커스텀 훅과 컨텍스트의 조합

1. 전역 상태 로직 캡슐화

예시: 전역으로 사용되면서, 동기화 되어야하는 유저 정보 데이터

// Context
const UserContext = createContext();

// 커스텀 훅
function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error("useUser must be used within a UserProvider");
  }
  return context;
}

// Provider
function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 사용자 정보를 표시하는 컴포넌트
function UserProfile() {
  const { user } = useUser();

  return <div>{user ? user.name : "Guest"}</div>;
}

function App() {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
}

 

결정해야 할 주요 질문

• 재사용이 필요한 로직인가? → 커스텀 훅 사용
• 여러 컴포넌트에서 공유되어야 하는 상태인가? → 컨텍스트 사용
• 컴포넌트 트리의 특정 부분에서만 공유되어야 하는 상태인가? → 컨텍스트를 사용하되 적절한 위치에 Provider 배치
• 그냥 특정 컴포넌트 내부에서만 사용되는 상태인가? → 일반 useState 또는 로컬 상태 관리 사용
• 모든 페이지에서 전역으로 사용되고, 공유되어야하는 상태 → 커스텀 훅과 컨텐스트 조합