#12 useContext

우리가 컴포넌트에서 다른 컴포넌트로 변수나 함수등 데이터를 전달할때 여러 단계를 거쳐야 하는 경우가 있다.

 

이럴 때 좀 더 편하게 그 과정을 지날 수 있도록 전역 변수를 설정하는 것이 가능하다.

 

그 기능을 하는 것이 createContext와 useContext이다. 

 

각각은 전역변수를 생성하고 사용하는 기능을 한다.

 

다음과 같이 src 폴더 안에 useContext 폴더를 생성하고, Context.jsx 파일을 생성 후, 훅들을 import 한다.

 

/*  src/useContext/Context.jsx  */

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

const Context = () => {
    const [name, setName] = useState('hello')
    
    const obj = {
        name,
        setName
    }
    
    return(
        <>
            {name}
        </>
    )
}

export default Context

 

name의 value가 잘 출력되는지 확인하고 다음과 같이 컴포넌트를 여러개 만들어준다.

 

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

const C = ({name}) => {
    return (
        <>
            {name}
        </>
    )
}


const B = ({name}) => {
    return (
        <>
            <C name={name}/>
        </>
    )
}

const A = ({name}) => {
    return (
        <>
            <B name={name}/>
        </>
    )
}

const Context = () => {
    const [name, setName] = useState('qweqr')

    const obj = {
        name,
        setName
    }

    return(
        <>
            <A name={name}/>
        </>
    )
}

export default Context

 

Context 컴포넌트에서 A, B를 거쳐 C 컴포넌트로 {name}을 전달해주었다.

 

이는 보기도 별로 좋지 않고, 비효율적이므로 전역 변수를 선언해 C에서 바로 {name} 값을 받게끔 해준다.

 

다음과 같이 상단에 Global 변수를 선언해 createContext 함수를 담고, A 컴포넌트를 감싸준다.

 

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

const Global = createContext()
// 이 코드를 추가

const C = () => {
    return (
        <>
            {name}        
        </>
    )
}


const B = () => {
    return (
        <>
        <C/>
        </>
    )
}

const A = () => {
    return (
        <>
        <B/>
        </>
    )
}

const Context = () => {
    const [name, setName] = useState('qweqr')

    const obj = {
        name,
        setName
    }

    return(
        <>
            <Global.Provider value={obj}>
                <A />
            </Global.Provider>
        </>
    )
}

export default Context

 

Global.Provider로 감싼 컴포넌트, 그리고 그 하위의 모든 컴포넌트는

 

Global.Provider과 함께 전달된 데이터를 인식할 수 있다.

 

obj에는 name 변수와 setName 함수를 넣어서 전달했으며,

 

더 이상 A,B 컴포넌트에 매개변수를 넣어 전달할 필요가 없다.

 

이렇게 전달된 전역 변수를 받으려면 다음과 같이 처음에 선언해준 변수를 useContext안에 넣어서 사용해야 한다.

 

const C = () => {
    const { name, setname } = useContext(Global)
    // Global 변수에 담긴 모든 전역 변수를 사용
    
    return (
        <>
            {name}
        </>
    )
}

 

여기까지 한 후 불러오면 Context 컴포넌트에서 전달한 변수 값이 바로 C에서 렌더링될 수 있다.

 

함수도 동일한 방식으로 가져와 사용할 수 있는데,

 

다음과 같이 name의 값을 바꾸는 버튼 element를 만들어 잘 작동되는지 확인해보자.

 

const C = () => {
    const {name, setName} = useContext(Global)

    return (
        <>
            {name}
            <button onClick= { () => { setName('bye') } }> change name </button>
        </>
    )
}