[React] Context API

Context API?

React에서 제공하는 Hook 중 하나로, 전역적으로 사용할 데이터를 관리하는 메커니즘이다

덕분에 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다

 

 

 

사용방법

createContext 전역 상태 만들기 

전역 상태를 만들기 전 전역 상태들을 모아 둘 폴더를 따로 만들어두는 걸 권장한다

전역 상태 저장소인만큼 여기저기 사용해야하는데

특정 컴포넌트 안에 넣어 만들어두는 것보다 따로 두는 게 더 효율이 좋기 때문이다

// 상태저장소 만들기
// src/context/counterContext.jsx
const counterContext = createContext()

 

 

Provider 전역 상태 연결 

// 연결하기
// src/context/counterContext.jsx
export function CounterProvider({children}) {
    const [counter, setCounter] = useState(0)
    return (
        <counterContext.Provider value={ [counter, setCounter] }>
            {children}
        </<counterContext.Provider>
    )
}

위에서 만든 전역상태저장소를 가져와 Provider를 꺼내 연결시켜준다

여기서 value속성에 값을 입력하면 counterContext의 상태값으로 선언되면서

전역 어디에서든 꺼내 사용할 수 있게 되는 값이 된다

 

const [counter, setCounter] = useState(0)

value={ [counter, setCounter] }

위 코드에서 useState로 만든 값 [counter, setCounter] 를 value 값에 넣어둔 상태다

그럼 [counter, setCounter] 는 이제 어느 컴포넌트에서든 꺼내 사용할 수 있게 되는 거다

 

{children}

이제 특정 위치에다가 사용하려면

<counterContext.Provider>의 자식으로 넣어야하기 때문에

{children}을 내려받은 후 자식으로 넣어준다

// main.jsx
<CounterProvider>
    <App />
</CounterProvider>

이제 마지막으로

모든 컴포넌트를 담고 있는 App을 위에서 만든 <CounterProvider>함수로 감싸주면 끝이다

여기서 App이 CounterProvider의 children 으로 내려받게 되는거다

 

useContext 전역 상태 가져오기 

// 가져오기
// src/context/counterContext.jsx
export function useConunter() {
    return useContext(counterContext)
}

// 컴포넌트
import { useConuter } from "./context/counterContext"

const [counter, setCounter] = useConuter()

전역상태저장소를 어디서든 호출할 수 있게

useContext를 useConuter 함수로 한 번 묶어서 리턴값을 받을 수 있게 한다

 

그러면 컴포넌트 어디에서든 useCounter의 배열값을 쉽게 가져올 수 있게 된다

const [counter, setConuter] = useConter()

그래서 받아온 값을 변수에 담아서 사용하면 끝이다