react 에서 context 와, Provider 는 무슨 용도일까.

일단 createContext 에 대한 용도적 정의를 먼저 내릴 필요가 있습니다.

 

• createContext

context object 를 생성하기 위해 쓰이는 react hook api.

 

• useContext

function component 에서 context object 를 불러오기 위해 쓰이는 react hook api.

 

그리고 이들을 사용 할 때, Provider component 가 사용되는데, 주로 영향을 끼치게 할 대상을 wrapping 을 함으로써 하위 child component 측에 context object 를 전달 하는 용도로 쓸 수 있다는 점.

 

예시.

import React from 'react'
import { createContext } from 'react'

// context object
const AnimeContext = createContext()

// provider component
// 여기서 AnimeContext 는 createContext 를 호출함으로서 생성 된 object.
const AnimeProvider = (props) => {
  return (
    <AnimeContext.Provider value={props.value}>
      {props.children}
    </AnimeContext.Provider>
  )
}

// child component 에게 데이터를 전달하기 위해 Provider component 를 사용.
const App = () => {
  return (
    <AnimeProvider value={{ message: 'Editor's pick has been updated! Check it out!' }}>
      <Example />
    </AnimeProvider>
  )
}

참고로 App component 가 AnimeProvider 를 통해서 context object 를 child component 인, <Example /> component로 승계하는 형식입니다.

 

그러면 이를 승계받은 <Example /> component 측에서는 이제 useContext 나 createContext 같이, 이를 통해서 어느 레벨링에서나 호출만 하면 자유롭게 쓸 수 있다는 점 입니다.

 

추신: 정리 중에 있는 글 입니다. 틀린 점이 있다면, 댓글로 남겨주시기 바랍니다.