[JavaScript] React - context API를 사용하여 전역값 관리하기

React

context API를 사용하여 전역값 관리하기

우리는 지금까지 자식의 자식의 자식의 컴포넌트에서 부모 컴포넌트에 있는 값을 사용하려면 props의 props의 props로 넘겨받아 사용해왔습니다. 하지만 contextAPI를 사용하여 여러번 props를 거치지 않고 바로 사용할 수 있는 context API를 사용해보려고 합니다.
아래의 예제를 통하여 직접 사용해 봅시다.

부모 컴포넌트에서 자식의 자식의 자식 컴포넌트에게 props로 전달하여 사용했던 우리의 모습입니다.

import React, { createContext, useContext} from "react" ;

function Child({text}) {
    return <div>안녕하세요? {text}</div>
}

function Parent({text}) {
    return <Child text={text} />
}

function GrandParent({text}) {
    return <Parent text={text} />
}

function ContextSample() {
    return <GrandParent text="GooD" />
}

export default ContextSample;

하지만 context API를 이용하여 여러번 거치지 않고 아래처럼 한번에 사용할 수 있게 됩니다.

import React, { createContext, useContext} from "react" ;

const MyContext = createContext('defaultValue');
// conText를 만들때는 createContext를 사용한다.
// 여기에 들어가는 파라미터인 defaultValue는 context를 사용하지 않았을때의 기본값입니다.
// 값을 설정하고 싶을때는 MyContext.Provider 컴포넌트를 사용해 값을 지정해주어야 합니다.
function Child() {
    const text = useContext(MyContext)
    return <div>안녕하세요? {text}</div>
}

function Parent() {
    return <Child />
}

function GrandParent() {
    return <Parent />
}

function ContextSample() {
    const [value, setValue] = useState(true)
    return (
        <MyContext.Provider value={value ? "Good" : "Bad"}>
        // value값이 바뀜에 따라서 우리는 Good or Bad을 출력하도록 하였습니다.
        // 즉 MyContext.Provider 컴포넌트의 value값을 사용하여 
        // 자식의 자식의 자식 컴포넌트인 Child 컴포넌트에게 바로 값을 전달한 모습입니다.
        <GrandParent />
        <button onClick={() => setValue(!value)}>Click Me</button>
        </MyContext.Provider>
    )
}

export default ContextSample;

• fastcampus 벨로퍼트님 리액트 강의자료를 공부하며 정리하며 작성하였습니다.