리액트 context api 로 회원정보 전역관리

0825 chatGpt 선생의 훌륭한 답변

 

useContext API를 사용하여 React에서 사용자의 로그인 상태와 데이터를 전역적으로 관리하려면 다음과 같은 단계를 따릅니다.

1. 컨텍스트 생성: 먼저 사용자의 로그인 상태와 데이터를 보유할 컨텍스트를 생성합니다.

export const UserContext = React.createContext();

2. App 컴포넌트 수정: 앱 전체를 UserContext.Provider로 감싸고 필요한 값을 제공합니다.

function App() {
  const [isLogin, setIsLogin] = useState(false); // 사용자 로그인 여부
  const [userData, setUserData] = useState(null); // 사용자 데이터

  // ... 기존 코드 ...

  return (
    <UserContext.Provider value={{ isLogin, setIsLogin, userData, setUserData }}>
      <>
        <Header />
        {/* ... 라우트 ... */}
        <Footer />
      </>
    </UserContext.Provider>
  );
}

3.컨텍스트 사용: 이제 컨텍스트를 어떤 컴포넌트에서든 사용하여 로그인 상태와 사용자 데이터에 접근할 수 있습니다.

import { useContext } from "react";
import { UserContext } from "./UserContext";

function SomeComponent() {
  const { isLogin, userData } = useContext(UserContext);

  // ... isLogin과 userData 사용 ...

  return (
    // JSX 내용
  );
}

4. 컨텍스트 업데이트: 사용자가 로그인하거나 로그아웃할 때 컨텍스트 값을 업데이트할 수 있습니다.

function Login() {
  const { setIsLogin, setUserData } = useContext(UserContext);

  // ... 로그인 로직 처리 ...

  // 로그인 성공 후
  setIsLogin(true);
  setUserData(/* 사용자 데이터 */);
}

function Logout() {
  const { setIsLogin, setUserData } = useContext(UserContext);

  // ... 로그아웃 로직 처리 ...

  // 로그아웃 성공 후
  setIsLogin(false);
  setUserData(null);
}

이 방법을 사용하면 useContext API를 활용하여 React 애플리케이션 전체에서 사용자의 로그인 상태와 데이터를 효과적으로 전역적으로 관리할 수 있습니다. 필요한 곳에서 UserContext를 임포트하고 useContext를 사용하여 컨텍스트 값을 접근하세요.