react useContext 간단 변경 방법

1. Context 폴더를 생성하고 LoginContext.js를 생성합니다. createContext를 적용해서 초깃값을 셋팅 후 provider, context 부분을 export 합니다. 

import React, { createContext, useState } from "react";

// LoginContext 생성
const LoginContext = createContext();

// LoginProvider 컴포넌트
const LoginProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState("");

  const value = {
    state: { isLoggedIn, username },
    actions: { setIsLoggedIn, setUsername },
  };

  return (
    <LoginContext.Provider value={value}>{children}</LoginContext.Provider>
  );
};

export { LoginProvider, LoginContext };

추가 설명)

1. const LoginContext = createContext()  - context 생성
2. LoginProvider - App.js 적용할 Provider 
3. LoginContext - 값을 가지고 오거나 변경할 때 import 

2. App.js 에 LoginProvider을 적용합니다. 

import React from "react";
import { Route, Routes } from "react-router-dom";
// route
import Login from "./Login";
import { LoginProvider } from "./Context/LoginContext";
function App() {
  return (
    <div>
      <LoginProvider>
        <Routes>
          <Route path="/" element={<Login />}></Route>
        </Routes>
      </LoginProvider>
    </div>
  );
}

export default App;

추가 설명) 

• LoginProvider 영역안에 있는 route는 LoginContext를 사용 가능합니다. 
• LoginProvider은 정확히는 LoginContext.js에서 return LoginContext.Provider이 적용되어있습니다.

3. Login할 페이지에 LoginContext를 import하고 actions를 셋팅한다음에 값을 변경하시면 됩니다. 

import { React, useContext, useEffect, useState } from "react";
import { LoginContext } from "./Context/LoginContext";
function Login() {
  // id 셋팅
  let [id, setId] = useState("");
  // 비밀번호 셋팅
  let [password, setPassword] = useState("");
  const { actions } = useContext(LoginContext);
  const { setIsLoggedIn, setUsername } = actions;
  const LoginTest = () => {
    try {
      console.log(value1);
    } catch (err) {
      console.log(err);
    }
    alert("로그인 성공하셨습니다.");
    setIsLoggedIn(true);
    setUsername("user"); // 실제 사용자 이름으로 대체
  };

  return (
    <div>
      <h1>로그인</h1>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div>id: </div>
        <div>
          <input
            type="text"
            onChange={(e) => {
              setId(e.target.value);
            }}
          />
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "row" }}>
        <div>password: </div>
        <div>
          <input
            type="password"
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          />
        </div>
      </div>
      <button
        onClick={() => {
          LoginTest();
        }}
      >
        로그인
      </button>
    </div>
  );
}

export default Login;

추가 설명)

1. LoginContext를 import 합니다. LoginContext.js에서 export한 LoginContext를 가지고 온다고 생각하시면 됩니다. 
2. const { actions } = useContext(LoginContext); const { setIsLoggedIn, setUsername } = actions; 이 부분은 현재 LoginContext 설정된 값을 변경할 수 있게 셋팅되었다고 보시면 됩니다. 
3. setIsLoggedIn(true); setUsername("user") 이 부분은 업데이트하는 걸로 이해하시면 됩니다. 

4. 개발자 도구에서 Components Context.Provider value state가 로그인 버튼 클릭시 정상적으로 변경되었는 지 확인합니다. 

추가 설명) 

로그인 버튼 누르기 전에는 isLoggedIn: false, usename: ''으로 되어있어야하고 버튼 클릭시 set이 되면서 이미지처럼 isLoggedIn: true, username: "user"가 나오는 지 확인하시면 됩니다.

 

주의 사항

reload를 하면 useContext에 설정한 값이 초기화되기 때문에 reload할 때 초기화 진행할 부분을 useContext 적용하시면 됩니다. 저는 이해를 돕기 위해서 login 적용한 것이니 참고만 해주시면 됩니다.