useContext

useContext

useContext 훅은 Consumer 컴포넌트 또는 고차 컴포넌트를 사용하지 않고 컨텍스트 객체의 현재 값(Value)를 받아 올 수 있다.

// SignIn.js
import React, { useContext } from 'react'
// 모듈로 생성한 context 객체를 불러온다. 
import AuthContext from '../context/AuthContext'

function SignIn(props) {
  // useContext()에 context객체를 인자로 전달하고 변수에 담아 사용한다. 
  const authContext = useContext(AuthContext)
  const { isAuth, signIn } = authContext
  return (
    {
      isAuth ? 
        <div className="signed">로그인 됨</div> : 
        <button type="button" onClick={() => signIn}>로그인</button>
    }
  )
}

useContext() 훅은 클래스 컴포넌트의 static contextType 또는 와 동일하며, 컨텍스트를 읽고, 변경사항을 구독하는 것만 가능하다. 컨텍스트의 값(value)을 변경하려면 가 필요하다.