컨텍스트

컨텍스트는 레벨에서 수동으로 Props 를 전달하지 않고 컴포넌트 트리를 통해 데이터를 전달할 수 있는 방법을 제공합니다.

왜 컨텍스트를 쓰나요?

보편적인 리액트 애플리케이션에서, 데이터는 Props를 통해 탑-다운(부모에서 자식으로) 형식으로 전달됩니다. 그러나 이 방식은 로케일 설정이나 UI 테마 등, 애플리케이션의 많은 컴포넌트에 전달해야하는 Props일 때 번거로울 수 있는 방법입니다. 컨텍스트는 트리의 모든 레벨을 통해 명시적으로 Props를 전달할 필요없이 컴포넌트 간에 서로 같은 값을 공유하는 방법을 제공합니다.

참고 리스크립트에서, Props를 내려주는 것은 JSX prop punning 기능과 강력한 타입 추론을 바탕으로 타입스크립트 / 자바스크립트보다 훨씬 간단하므로 단순하게 Props 드릴링이 선호되는 경우가 더 많습니다. 꼼수보다는 투명한 것이 좋죠!(원문: Less magic means more transparency!)

언제 컨텍스트를 씁니까?

컨텍스트는 사용자 인증 정보, UI 테마, 또는 로케일 설정 등 리액트 컴포넌트 트리에 대해 “전역”적으로 적용될 수 있는 데이터를 공유하도록 설게됐습니다. 예를 들어 아래 코드에서 Button 컴포넌트의 스타일을 지정하기 위해 “theme” Props를 수동으로 생성해 내려줍니다.

/* src/App.res */
type theme = Light | Dark;

module Button = {
  @react.component
  let make = (~theme) => {
    let className = switch theme {
      | Light => "theme-light"
      | Dark => "theme-black"
    };
    <button className> {React.string("Click me")} </button>
  }
}

module ThemedButton = {
  @react.component
  let make = (~theme) => {
    <Button theme />
  }
}

module Toolbar = {
  @react.component
  let make = (~theme) => {
    <div>
      <ThemedButton theme/>
    </div>
  }
}

@react.component
let make = () => {
  /* 가장 상위 컴포넌트에서 테마를 정의해 자식 컴포넌트로 내려줍니다 */
  <Toolbar theme=Dark/>
}

컨텍스트를 사용하면 중간 단계를 거치며 Props를 내려주는 것을 피할 수 있습니다.

/* src/App.res */

module ThemeContext = {
  type theme = Light | Dark;
  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 Button = {
  @react.component
  let make = (~theme) => {
    let className = switch theme {
      | ThemeContext.Light => "theme-light"
      | Dark => "theme-black"
    };
    <button className> {React.string("Click me")} </button>
  }
}

module ThemedButton = {
  @react.component
  let make = () => {
    let theme = React.useContext(ThemeContext.context)

    <Button theme/>
  }
}

module Toolbar = {
  @react.component
  let make = () => {
    <div> <ThemedButton /> </div>
  }
}

@react.component
let make = () => {
  <ThemeContext.Provider value=ThemeContext.Dark>
    <div> <Toolbar /> </div>
  </ThemeContext.Provider>
}