Context API

전역에서 데이터를 관리할 수 있도록 하는 리액트 내장 기능

props driling을 통해 컴포넌트 간에 데이터를 전달할 수 있지만 프로젝트의 규모가 커지게 되면 불필요한 props driling이 발생할 수 있다.

이때 Context API를 사용해 전역에서 데이터를 관리하고 사용할 수 있도록 하면 불필요한 props driling이 발생하는 것을 방지할 수 있다.

props로 데이터를 전달하는 것이 아닌 Context API로 컴포넌트간에 값을 전달할 수 있다.

Context API는 전역에 Context를 생성해 모듈에서 값을 가져와 사용할 수도 있고

Context.jsx

const UserInfo = createContext({name: "choi"})
export {UserInfo}

Component.jsx

import {UserInfo} from "./Context.jsx"

function Component() {
  return (
    <Context.Consumer>
      {(value) => {코드...}}
    </Context.Consumer>
  )
}

Provider로 직접 Consumer에 값을 전달할 수도 있다.

또는 useContext 훅을 사용해 더 편리하게 값을 전달할 수도 있다.

Context.Provider

Context 객체의 Provider 컴포넌트를 사용해 값을 제공할 수 있다.
데이터를 제공하고자 하는 컴포넌트의 상위에 위치한다.

function App(){
  return(
    <UserInfo.Provider value={{name: "choi", age: "20"}}>
    	<User/>
    </UserInfo.Provider>
  )
}

Context.Consumer

Context 객체의 값을 소비할 수 있는 컴포넌트
Provider 컴포넌트로부터 제공된 Context 값을 제공받거나 모듈에서 값을 import해 사용할 수 있다.
value를 인자로 받는 함수를 자식으로 가진다.

function User(){
  return(
    <UserInfo.Consumer>
      {(value) => {
        <p>{value.name}, {value.age}</p>
      }}
    </UserInfo.Consumer>
  )
}

Context를 생성하게 되면 전역 공간을 사용하는 것이기 때문에 반드시 필요한 데이터가 아니라면 사용을 최소화 하는것이 좋다.