[9.13(수) 북스탁 프로젝트] 로그인 상태관리 | useAuth, AuthContext, AuthProvider,

 

헤더의 오른쪽 부분이다.

메인페이지에서 로그인을 안한 비회원일때는 SIGN UP버튼이 표시되고

로그인을 한 회원일 경우 MYPAGE버튼이 표시될 수 있도록 하는 기능을 구현하고자 한다.

 

 

 

 

header

const Header = function () {
    // 로그인 상태 저장 state
    // eslint-disable-next-line 
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    
    
    .
    .
    .
    
    {
                                    isLoggedIn ? (
                                        <li className="nav-item">
                                            <Link to="/mypage" className="nav-link text-secondary-emphasis" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" className="bi bi-person-fill" viewBox="0 0 16 16">
                                                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3Z" />
                                                </svg>
                                                <span style={{ fontSize: '12px', marginTop: '6px' }}>MYPAGE</span>
                                            </Link>
                                        </li>
                                    ) : (
                                        <li className="nav-item">
                                            <Link to="/signup" className="nav-link text-secondary-emphasis" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z" />
                                                    <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
                                                </svg>
                                                <span style={{ fontSize: '12px', marginTop: '6px' }}>SIGN UP</span>
                                            </Link>
                                        </li>
                                    )
                                }
                            </ul>

 

isLoggedIn이 처음에는 false로 기본값 지정이 되어있어 signup버튼이 나오게 되고

로그인이 확인된 경우 true로 변경, mypage버튼이 나오게된다.

 

 

 

signin

const SignIn = function () {
  const [loginId, setLoginId] = useState("");
  const [loginPassword, setLoginPassword] = useState("");
  const { setIsLoggedIn } = useAuth();

반응형

signin 파일에 useAuth() 를 추가한다.

 

 

 

AuthContext

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

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => React.useContext(AuthContext);

 

사용자 인증 정보를 관리하기 위한 AuthContext를 생성하고, 

해당 컨텍스트를 사용하여 사용자 인증 상태를 관리하는 AuthProvider를 정의한다.

 

return문에서

<AuthContext.Provider> 컴포넌트는 isLoggedIn과 setIsLoggedIn 데이터를 자식 컴포넌트에게 제공한다.

 

 

 

app

function App() {
  return (
    <AuthProvider> {/* AuthProvider로 감싸서 로그인 상태 관리 */}
      <Router>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<MainPage />} />
            <Route path="/signin" element={<SignIn />} />
            <Route path="/searchResult" element={<SearchResult />} />
            <Route path="/trading" element={<Trading />} />
            <Route path="/signup" element={<SignUp />} />
            <Route path="/mypage" element={<MyPage />} />
            <Route path="/booksignup" element={<BookSignUp />} />
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  );
}

 

AuthProvider로 감싸서 로그인 상태 관리를 한다.