[React] Context : useContext

[구조]

 

Layout 컴포넌트 안에 LoginBox

 

 

 

 

LoginBox 컴포넌트 안에 Login

 

 

 

Login 컴포넌트 안에 Button

 

 

 

 

여기에는 화면에 표출될 내용이 들어간다

 

 

 

이렇게 되어있는 컴포넌트를

 

 

 

LayoutContext로 묶어주었다.

이렇게 하면 최하위 컴포넌트에서

상태값을 전달전달 해서 받는것이 아니라

바로 사용할 수 있게 된다.

 

그리고 LayoutStore라는 틀만 사용해서 상태값을 만든다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

Layout.jsx

import React from 'react'
import LayoutStore, { LayoutContext } from './LayoutContext'

const Button = () => {
    const context = React.useContext(LayoutContext)
    return (
        <div>
            <ol>
                <li>{context.userid}</li>
                <li>{context.username}</li>
                <li>{context.job}</li>
            </ol>
        </div>
    )
}

const Login = () => {
    return (
        <>
            <Button />
        </>
    )
}

const LoginBox = () => {
    return (
        <>
            <Login />
        </>
    )
}

const Layout = () => {
    return (
        <>
            <LayoutStore>
                <LoginBox />
            </LayoutStore>
        </>
    )
}

export default Layout

LayoutContext.jsx

import React from 'react'

export const LayoutContext = React.createContext() 

const LayoutStore = (props) =>{
    const user = {
        userid : 'web7722',
        username : 'ingoo',
        job : 'dev'
    }

    return(
        <LayoutContext.Provider value={user}>
            {props.children}
        </LayoutContext.Provider>
        
    )
}

export default LayoutStore

 

 

---

1.  Context 생성하기

export const LayoutContext = React.createContext()

 

우선 이 전체 컴포넌트들을 묶어줄 LayoutContext 를 생성한다.

이거는 하나의 Component를 생성했다고 보면된다.

 

React.createContext

Context 객체를 만들수 있다.

const MyContext = React.createContext(defaultValue);

 

 

 

2.  껍데기 컴포넌트 생성 + 상태값 하위에게 전달

const LayoutStore = (props) => {
    const user = {
        userid : 'web7722',
        username : 'ingoo',
        job : 'developer'
    }

    // value : 기본값으로 뭘 보낼지
    return(
        <LayoutContext.Provider value={user}>   
            {props.children}
        </LayoutContext.Provider>
    )
}

LayoutContext.Provider에 value 값에 user 객체를 담아서 보내면 자손 컴포넌트들이 사용할 수 있다.

 

Context.Provider

Provider 를 이용하여 Context 변경 사항을 자손들에게 제공 할 수 있다.

<MyContext.Provider value={/* some value */}></MyContext.Provider>

 

Provider 의 Value는 하위의 모든 Consumer 에서 사용할 수 있으며, Provider 하위의 모든 Consumer 는 Provider 의 value가 변경 될 때마다 재 렌더링 된다.

 

 

 

 

* props를 받아온 이유?

import LayoutStore from './LayoutContext'

const Layout = () => {
    return (
        <>
            <LayoutStore>
                <LoginBox />
            </LayoutStore>
        </>
    )
}

자식 중 최상단 컴포넌트에서 이런식으로 LayoutStore로 내용들을 감싸서 보냈기 때문에

이를 children 으로 받아와야한다.

그래서 props.children으로 받아왔다.

 

 

3.  상태값 사용하기

import {LayoutContext} from './LayoutContext'

const Button = () => {
    const context = React.useContext(LayoutContext)     // value 값 web7722 를 받을 수 있게 처리함
    return (
        <>
            <button>{context.userid}</button>
            <ul>
                <li>{context.userid}</li>
                <li>{context.username}</li>
                <li>{context.job}</li>
            </ul>
        </>
    )
}

Hook의 useContext

Hook의 useContext로 Context 객체의 value를 가져올 수 있다.

const value = useContext(MyContext);

 

useContext 를 사용해서 상태값 value를 쓸 수 있게 해보자

상태값을 context라는 변수에 저장하게 되었다.

 

그리고 사용하려면 context.userid 이런식으로 사용할 수 있다.

 

 

* 껍데기에 싸서 보낼때는 껍데기 컴포넌트 쓴 다음에 children으로 받아줌

근데 그 상태값을 사용할 때는 상태값이 저장된 찐 레이아웃 컴포넌트에서 받아와야함