ReScript in Korean

useContext

원문

컨텍스트는 모든 레벨에서 수동으로 props를 전달 할 필요없이 컴포넌트 트리를 통해 데이터를 전달하는 방법을 제공합니다. useContext 훅은 그러한 컨텍스트 값에 접근 할 수 있습니다.

참고 리액트 컨텍스트의 모든 세부 사항과 이론적 근거는 여기에서 찾을 수 있습니다.

사용법

let value = React.useContext(myContext)

React.Context.t (React.createContext에서 반환 된 값)를 수락하고 해당 컨텍스트에 대한 현재 컨텍스트 값을 반환합니다. 현재 컨텍스트 값은 트리의 호출 컴포넌트 위에 있는 가장 가까운 <MyContext.Provider>의 prop 값에 의해 결정됩니다.

예제

간단한 ThemeProvider

/* App.re */
module ThemeContext = {
let context = React.createContext("light")
module Provider = {
let provider = React.Context.provider(context)
@react.component
let make = (~value, ~children) => {
React.createElement(provider, {"value": value, "children": children})
}
}
}
module ThemedButton = {
@react.component
let make = () => {
let theme = React.useContext(ThemeContext.context)
let (color, backgroundColor) = switch theme {
| "dark" => ("#ffffff", "#222222")
| "light" | _ => ("#000000", "#eeeeee")
}
let style = ReactDOMStyle.make(~color, ~backgroundColor, ())
<button style> {React.string("I am a styled button!")} </button>
}
}
module Toolbar = {
@react.component
let make = () => {
<div> <ThemedButton /> </div>
}
}
@react.component
let make = () => {
<ThemeContext.Provider value="dark">
<div> <Toolbar /> </div>
</ThemeContext.Provider>
}