ReScript: React 구성 요소 만들기

ReScript 생태계의 큰 부분 중 하나는 React에 대한 바인딩입니다. 이러한 바인딩은 rescript-react 이라는 프로젝트에 있습니다. React 컴포넌트를 만드는 방법에 대한 소개 포스트입니다.

// Button.res
@react.component
let make = (~onClick) => {
  <button onClick>{React.string("Click me")}</button>
}

코드를 한 줄씩 단계별로 살펴보고 무슨 일이 일어나는지 봅시다.
@react.component는 rescript-react에게 구성 요소를 작성하고 있음을 알려주는 데코레이터이며 props 설정을 올바르게 가져오기 위해 장면 뒤에서 일부 코드를 생성합니다.
let make = (~onClick) => {는 구성 요소 기능의 시작을 정의합니다. 모든 것이 올바르게 작동하려면 함수 이름이 make여야 합니다. make는 모듈의 "주요"기능에 대한 규칙이기도 하며 ReScript의 모든 파일은 모듈입니다. onClick는 명명된 인수입니다. JavaScript React에서 ... = ({ onClick }) =>로 정의된 props와 비교할 수 있습니다. 이 경우 이 구성 요소에 대한 유일한 prop입니다.
<button onClick>는 JSX의 시작이며 일반 React처럼 작동합니다. 차이점은 버튼에 보내는 onClick 소품에 있습니다. React에서는 onClick={onClick} 해야 하지만 rescript-react JSX에는 punning 가 있습니다. 이것은 return { onClick } 대신 return { onClick: onClick }를 수행할 수 있는 JavaScript의 객체처럼 작동합니다.
onClick의 유형은 ReactEvent.Mouse.t => unit와 같은 사용법에 의해 유추되므로 prop의 유형을 직접 정의할 필요가 없습니다. 유형은 또한 소품이 필요함을 나타냅니다.

버튼 내부에 텍스트를 표시하기 위해 React.string("Click me") 를 사용합니다. ReScript는 모든 JSX 자식이 동일한 유형React.element을 가져야 합니다. React.string 는 일반 "Click me" 문자열을 React.element 로 변환합니다. rescript-react에는 int , float , string , array 와 같은 대부분의 원시 값을 React 요소로 변환하는 도우미 메서드가 있습니다.

생성된(ES6) 코드는 다음과 같습니다.

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from 'react'

function Test(Props) {
  var onClick = Props.onClick
  return React.createElement(
    'button',
    {
      onClick: onClick,
    },
    'Click me'
  )
}

var make = Test

export { make }
/* react Not a pure module */