리액트(React) - Context API

리액트에서 전역적으로 상태를 공유할 수 있도록 도와준다.

 

import React, { createContext, useContext } from 'react'
import "./style.css";
const themeDefault = { border : '10px solid green'};
const themeContext = createContext(themeDefault)

const Sub1 = () =>{
  const theme = useContext(themeContext)
  return(
    <div>
      <h1 style={theme}>Sub1</h1>
      <Sub2 />
    </div>
  )
}

const Sub2 = () =>{
  const theme =useContext(themeContext)
  return(
    <div>
      <h1 style={theme}>Sub2</h1>
      <Sub3/>
    </div>
  )
}

const Sub3 = () =>{
  const theme =useContext(themeContext)
  return(
    <div style={theme}>
      <h1>Sub3</h1>
    </div>
  )
}



const App = () => {
  const theme = useContext(themeContext)
  console.log('theme', theme);
  return (
    <themeContext.Provider value={{border: '10px solid blue'}}>
    <div className='root' style={theme}>
      <h1>Hello wordl!</h1>
      <Sub1 />
    </div>
    </themeContext.Provider>
  )
}

export default App

// style.css

.root,
.root div{
    border: 10px solid gray;
    margin: 10px;
    padding: 10px;
}

Context API를 이용하려면 먼저 컨텍스트를 만들어야 합니다. 리액트에서 컨텍스트를 만들려면 createContext라는 함수를 임포트해야 합니다. 그리고 이 createContext 함수로 새로운 themeContext라는 것을 만들 수 있습니다. 이때 themeDefault를 createContext 함수의 첫 번째 파라미터로 전달하면 themeDefault 새로 생성한 컨텍스트의 기본값이 됩니다.

 

함수형에서는 useContext라는 함수를 임포트하고, 이 useContext 함수를 컴포넌트에서 사용하면 됩니다. 예를 들면, 다음과 같이 useContext 함수에 어떤 컨텍스트를 사용할 것인지 전달합니다.

 

Provider 컴포넌트는 value 값이 꼭 필요합니다. 

 

정리

1. createContext

- Context를 생성하는 함수입니다. React 컴포넌트 트리 전체에서 데이터를 공유하려 할 때 사용합니다. 특히 prop drilling(pops를 중첩된 여러 레벨의 컴포넌트에 전달하는 것)을 피하기 위해 유용합니다.

const MyContext = createContext(defaultValue);

여기서 'defaultValue'는 해당 Context의 Consumer 컴포넌트가 트리 내에 매칭되는 Provider를 찾지 못했을 때 사용됩니다.

 

2. useContext

- 주어진 Context 객체에 포함된 현재의 context value를 반환하는 React Hook입니다.

const value = useContext(MyContext);

이 Hook을 사용하여 컴포넌트에서 Context 값을 읽을 수 있습니다. 이 값을 읽기 위해 컴포넌트를 함수 내부에 중첩할 필요가 없기 때문에, 기존 'Context.Consumer' 구성 요소를 사용하는 것보다 코드가 간결해집니다.

 

3. Provider

- Context를 생성할 때 반환하는('createContext' 로 생성된) Context 객체에 포함되는 컴포넌트입니다. 'Provider'는 'value' prop를 받아서 이 값을 하위 컴포넌트에 전달합니다. 하위 컴포넌트는 이 값을 읽기 위해 'useContext'를 사용할 수 있습니다.

 

<MyContext.Provider value={/* some value */}>
  {/* children */}
</MyContext.Provider>

여기서 'value' prop는 Context에 의해 전달되는 값을 설정하는 데 사용됩니다. 'Provider' 내부의 모든 컴포넌트는 'useContext'를 사용하여 이 값을 접근할 수 있습니다.

 

요약

Context API는 React앱에서 전역적(또는 컴포너트 트리의 "광범위한" 부분)으로 값을 공유하는 방법을 제공합니다. 'createContext'를 사용하여 Context를 생성하고 'Provider'를 사용하여 값을 전달하며, 'useContext' Hook을 사용하여 값을 읽을 수 있습니다.