> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/hook/usecontext.md).

# useContext

## useContext

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

```javascript
// 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>
    }
  )
}
```

{% hint style="info" %}
useContext() 훅은 클래스 컴포넌트의 static contextType 또는 와 동일하며, 컨텍스트를 읽고, 변경사항을 구독하는 것만 가능하다. 컨텍스트의 값(value)을 변경하려면 가 필요하다.&#x20;
{% endhint %}

##