MBTI 테스트 trouble shooting (useContext)

 

 

useContext를 사용하여 isAuthenticated를 가져오니까 값이 undifined가 나오면서 오류가 나타남

 

원일을 추측해보면 Context에서 isAuthenticated가 존재하지 않음 = 오타?,

value로 내보내지 않음, Provider로 감싸지 않음,  Context를 import하지 않음과 같은 이유들 때문이라고 생각이 든다.

 

 

 

1. Context에서 isAuthenticated 오타 혹은 잘 존재하는지 확인

import React, { createContext, useState, useEffect } from "react";
import { getUserProfile } from "../api/auth";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(null);
  const token = localStorage.getItem("accessToken");
  const userDataLocal = JSON.parse(localStorage.getItem("user"));

  useEffect(() => {
    const fetchProfile = async () => {

 

코드를 보니 isAuthenticated가 존재하고 있음을 확인했기 때문에 value 넘겨주었는지 확인해봐야겠다

 

2. isAuthenticated value로 넘겨 주기

 

    setUser(null);
  };

  return (
    <AuthContext.Provider
      value={{
        isAuthenticated,
        login,
        logout,
        token,
        user,
        setUser,
        userDataLocal,
      }}
    >
      {children}
    </AuthContext.Provider>
  );

 

isAuthenticated 를 value로 전달하고 있음을 확인했음 그렇다면

해당 Context를 사용할 수 있도록 Provider로 감싸주었는지 확인해보자

 

 

3. AutnProvider 확인

 

const Router = () => {
  return (
        <BrowserRouter>
          <RoutesArea
            <Routes>
              <Route path="/" element={<LayOut />}>
                <Route index element={<Home />} />

 

const App = () => {
  return (
    <AppContainer>
      <Router />

import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <>
    <App />
  </>,

 

 

 

App.jsx, Main.jsx, Router.jsx 다 확인해 보아도 AutnProvider가 감싸져 있는 부분은 없었다..

Router.jsx에 AutnProvider 감싸도록 코드를 수정하고 해당 오류가 해결 되는지 확인해봐야겠다

 

 

const Router = () => {
  return (
    <AuthProvider>
        <BrowserRouter>
          <RoutesArea>
            <Routes>
              <Route path="/" element={<LayOut />}>
                <Route index element={<Home />} />

 

Provider가 감싸지자마자 페이지가 정상적으로 작동하는 모습!!

다음부터는 이러한 사소한 부분을 까먹지 말고 오류나기전에 잘 처리하자..