React useContext로 상태 관리하기

컨텍스트 파일 설정

import {createContext, useState} from 'react'

export const LoginContext = createContext({});

Context.Provider로 구성 요소 래핑

import {LoginContext} from './Context'

export function App() {
  const [loggedIn, setLoggedIn] = useState(false)

  return(
    <LoginContext.Provider value={{loggedIn, setLoggedIn}}>
       <Home />
       <Login />
       <Profile />
    </LoginContext.Provider>
  )
}

구성 요소에 소품 전달

import {LoginContext} from '../Context';
import React, {useContext} from 'react';

export const Login = () => {
   const {loggedIn, setLoggedIn} = useContext(LoginContext);

   return (
      <div>
         <button onClick={() => setLoggedIn(!loggedIn)}>Click 
           here to login
         </button>
         {loggedIn? <h1>You are logged in</h1>: <h1>You are 
         not logged in</h1>}
      </div> 
   )
}