ReScript: rescript-react에서 useState 사용

React에는 간단한 상태를 추적하는 데 유용한 useState 후크가 있습니다. rescript-react에도 이 후크가 있지만 API는 useState 의 함수 변형만 포함한다는 점에서 약간 다릅니다. 다음은 예제를 확장한 기본 예제입니다.

@react.component
let make = () => {
  let (displayValue, setDisplayValue) = React.useState(() => false)

  <div>
    {displayValue ? React.string("The best value") : React.null}
    <Button onClick={_ => setDisplayValue(displayValue => !displayValue)}>
      {React.string("Toggle value")}
    </Button>
  </div>
}

React.useState 반환 값이 초기 상태인 함수를 사용합니다. 그 대가로 우리는 현재 상태와 setter의 tuple 을 얻습니다. 반환 값의 유형은 초기 상태에서 유추됩니다. 이 경우 유형은 bool 의 경우 displayValue 이고 (bool => bool) => unit 의 경우 setDisplayValue 입니다.

그런 다음 이 예에서 displayValue로 정의된 값을 사용하여 조건부로 텍스트를 표시할 수 있습니다. 삼항의 양쪽은 같은 유형을 가져야 하므로 아무 것도 표시하고 싶지 않을 때 React.null 처럼 React.element 에 매핑되는 React.string 를 사용합니다.

값을 업데이트하기 위해 이 예에서 setDisplayValue로 정의된 setter 함수를 호출합니다. 이 경우 이전 값을 기준으로 displayValue를 토글합니다.

React 구현에 대한 bindings for useState 은 API가 최선은 아니지만 유형 안전성이 있는 상태를 구현하는 유일한 방법임을 인정합니다. 권장 사항은 가능하면 use useReducer 입니다.