useState

React.useState는 상태를 가진 값과 그것을 업데이트하는 함수를 반환합니다.

용법

let (state, setState) = React.useState(_ => initialState)

렌더링이 이뤄지는 동안 리턴되는 상태인 state는 첫번째 인자로 전달된 값과 같습니다. (initialState)

setState 함수는 다른 컴포넌트로 주입할 수 있습니다. 이건 자식 컴포넌트가 부모 컴포넌트의 상태를 설정할 수 있는 유용한 방법입니다.

예제

텍스트 Input에 useState 사용하기

@react.component
let make = () => {
  let (text, setText) = React.useState(_ => "");

  let onChange = evt => {
    ReactEvent.Form.preventDefault(evt)
    let value = ReactEvent.Form.target(evt)["value"]
    setText(_prev => value);
  }

  <div>
    <input onChange value=text />
  </div>
};

자식 컴포넌트로 setState 넘겨주기

이 예시에서 우리는 darkmode라는 boolean 상태를 관리하는 ThemeContainer setDarkmode 함수를 ControlPanel 컴포넌트에서 상태를 바꿀 수 있도록 내려줄것입니다.

/* ThemeContainer.res */
module ControlPanel = {
  @react.component
  let make = (~setDarkmode, ~darkmode) => {
    let onClick = evt => {
      ReactEvent.Mouse.preventDefault(evt)
      setDarkmode(prev => !prev)
    }

    let toggleText = "Switch to " ++ ((darkmode ? "light" : "dark") ++ " theme")

    <div> <button onClick> {React.string(toggleText)} </button> </div>
  }
}

@react.component
let make = (~content) => {
  let (darkmode, setDarkmode) = React.useState(_ => false)

  let className = darkmode ? "theme-dark" : "theme-light"

  <div className>
    <section>
      <h1> {React.string("More Infos about ReScript")} </h1> content
    </section>
    <ControlPanel darkmode setDarkmode />
  </div>
}

setDarkmode 함수가 새 값을 반환할 때마다 (Ex true -> false), ThemeContainer의 className 및 중첩된 ControlPanel 컴포넌트의 toggleText를 다시 렌더링합니다.

언커리드 버전

좀 더 깔끔한 JS 출력을 위해 React.Uncurried.useState 언커리드 버전을 사용할 수 있습니다.

let (state, setState) = React.Uncurried.useState(_ => 0)

setState(. prev => prev + 1)

useEffect

useReducer