context를 연결하는 컴포넌트를 최상위 컴포넌트로 한다면?

모든 페이지에 있는 어떤 컴포넌트에서든 사용이 가능하다.

src/store/users.js

import React,{createContext} from 'react'

**export** const Usercontext = createContext()

const UserStore=(props)=>{
  const users = {
    name:'hey-hey',
    job :'developer'
  }
  return (
  <Usercontext.Provider value={users}>
    {props.children}          
  </Usercontext.Provider>)
}
export default UserStore

• createContext 라는 함수를 불러와서 실행시키면 비어있는 context가 반환된다.
  • const Usercontext = createContext()
  • 이 값을 export 시켜준다.
• 그다음은 이 Context에 넣고 싶은 값을 만든다.
  • const users = { name:'hh',job:'devel'}
• return에 createContext로 반환된 context에는 provider 라는 것이 있다. 여기에 value라는 이름으로 우리가 전달하고 싶은 값(객체형태) 로 넣어준다.
  
• 그리고 이 사이에는 props.children을 사용해서 하위 컴포넌트를 렌더링 해준다.

App.js (최상위 컴포넌트)

import UserStore from './store/users'
function App() {
  return (
    <UserStore>
      <div className='App'>
        ...
      </div>
    </UserStore>
  );
}

전체를 감싸주게 되면 모든 컴포넌트에서 사용이 가능하다.

사용하고 싶은 곳

UserCheck.js

import { useContext } from "react"
import {Usercontext} from "./store/users"
const UserCheck = ()=>{
  const context = useContext(Usercontext)
  console.log(context)
  return (
    <div>
      <h1>{context.name}</h1>
      <h1>{context.job}</h1>
    </div>
  )
}
export default UserCheck

• Context를 생성할 때는 createContext
• Context를 조회하고 싶을 때는 userContext 를 사용하면 된다.
• 보내준 Usercontext 를 받아와서
• 이 값을 useContext를 이용해 새로운 값으로 저장해준다
  • const context = useContext(Usercontext)
  • 이 context 안에 값이 저장이 되어 있다.

수정하기

store/users.js

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

export const Usercontext = createContext()
export const setUserContext = createContext(()=>{})

const UserStore=(props)=>{
  const [users,setUsers] = useState({
    name:'hey-hey',
    job :'developer',
    age : 28
  })
  return (
    <setUserContext.Provider value={setUsers}>
      <Usercontext.Provider value={users}>
        {props.children}          
      </Usercontext.Provider>
    </setUserContext.Provider>
  )
}
export default UserStore

• setUserContext를 만들어 준다 .

export const setUserContext = createContext(()=>{})

• state를 만들때 setUsers도 만들어준다.
  • return 값에 setUserContext로 제일 밖을 묶고 value로 User를 바꾸는 값을 보내준다.

UserCheck.js

import { useContext } from "react"
import {Usercontext,setUserContext} from "./store/users"
const UserCheck = ()=>{
  const context = useContext(Usercontext)
  const setUsers = useContext(setUserContext)
  console.log(context)
  return (
    <div>
      <h1>{context.name}</h1>
      <h1>{context.job}</h1>
      <h1>{context.age}살</h1>
      <button onClick={()=>setUsers({...context,age:context.age+1})} >나이먹기</button>
    </div>
  )
}
export default UserCheck

• setUserContext 를 받아온 뒤 그 context를 useContext를 이용해 새로운 setusers라는 함수를 만들어준다.