React의 useContext를 사용한 전역상태관리

로그인 후 로그인 정보를 저장하고 전역적으로 관리하면서 하위컴포넌트에서도 사용할 수 있도록

context를 사용하여 상태를 관리하고자 했다.

먼저 최상위 컴포넌트로 Context 컴포넌트를 만들어주고 씌워줬다.


// Context.js

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

export const AuthContext = createContext(); // context를 만들어주고, 하위 컴포넌트에서 이를 사용하기 때문에 export 해준다.

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(); // 로그인 시 유저 정보를 담기 위해 state를 사용했다.

  return (
    <AuthContext.Provider value={{ user, setUser }}> // value에 위에 선언한 값을 담아 보내, 하위 컴포넌트에서 사용한다.
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

// App.js
App.js 의 형태는 이렇게 된다.

import AuthProvider from './auth_context';

function App() {
  return (
      <AuthProvider>
        <A /> // A, B, C 컴포넌트는
        <B /> // AuthContext의 
        <C /> // {children} 에 해당한다.
      </AuthProvider>
  );
}

export default App;

이런 느낌~

// A.js

import React, { useContext } from 'react'; // 하위 컴포넌트에서 전역으로 관리되고 있는 상태값을 사용하기 위해 useContext를 불러온다.
import { AuthContext } from '../../controller/auth_context'; // export 해줬던 AuthContext를 불러온다.

const A = () => {
  const { user, setUser } = useContext(AuthContext); // 콘솔로 useContext(AuthContext)를 확인하면 user와 setUser가 찍힌다.
                                                       // useState를 불러오지 않고도 사용할 수 있다.
  return (
    <>
            <div
              onClick={async () => {
                await parse.User.logIn(email, password, { //parse를 통한 로그인 부분
                  usePost: true,
                }).then((res) => setUser(res)); // 로그인 성공시 setUser에 값을 담아준다.
              }}
            >
              로그인
            </div>
    </>
  );
};

export default A;

하위 컴포넌트인 A에서 로그인에 성공하면 최상위의 Context 컴포넌트의 'user'에 로그인 정보가 담기면서 다른 하위컴포넌트에서도 'user'의 값을 사용할 수 있게 된다.