# 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 %}

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/react-study/hook/usecontext.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.