React - 로그인 정보 관리(React Context 사용)

프로세스

React Context에 로그인 정보를 담아서 전역적으로 사용할 수 있도록 한다.

 

상태를 관리하는 store가 따로 없다.

 

React Context란

• https://www.notion.so/shin96bc/React-da0323bb125049a7a544bf2715d99906?p=47b34a0f354649fc8459dea47be0b684&pm=s

 

코드 작성법

 

폴더 구조

 

AuthContextProvider

import {createContext, useContext} from "react";

// AuthContext는 Hook을 사용해서 제공한다.
const AuthContext = createContext(null);

export const useAuthContext = () => {
  return useContext(AuthContext);
};

const AuthContextProvider = (props) => {
  const { children } = props;

  // 서버에서 토큰 유효성 체크

  const isValidToken = true;

  const loginContext = {
    token: 'token',
    name: 'user1',
    isValidToken
  }

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

export default AuthContextProvider;

 

App.js

import PrivateRoutes from "./routes/private";
import PublicRoutes from "./routes/public";
import {useAuthContext} from "./context/AuthContextProvider";

function App() {
  const authContext = useAuthContext();

  return (
    <>
      {
        authContext.isValidToken ?
          <PrivateRoutes />
          :
          <PublicRoutes />
      }

    </>
  );
}

export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import AuthContextProvider from "./context/AuthContextProvider";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthContextProvider>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </AuthContextProvider>
);

reportWebVitals();

 

장단점

• 장점
  • 리액트 내장 기능이어서 별다른 세팅없이 사용이 가능하다. (dependency 필요없음)
• 단점
  • 랜더링 여부를 선택할 수 없다.
  • 애플리케이션이 복잡해지고 context가 많아지면 작성해야하는 코드도 많아지고 관리가 힘들다.
  • 관리하는 데이터가 복잡하면 관리하기 힘들다.
  • 위의 단점들은 로그인 데이터만 관리할 때는 큰 문제 없을 것으로 보이나, 큰 프로젝트에서는 redux를 사용하는게 좋아보인다.