Psst! ReasonReact가 React를 작성하는 가장 좋은 방법 인 이유는 다음과 같습니다.

React를 사용하여 사용자 인터페이스를 구축하고 있습니까? 나도 그래 이제 ReasonML을 사용하여 React 애플리케이션을 작성해야하는 이유에 대해 알아 봅니다.

반응은 사용자 인터페이스를 작성하는 아주 멋진 방법입니다. 그러나 더 시원하게 만들 수 있습니까? 보다 나은?

더 나아지게하려면 먼저 문제를 식별해야합니다. 그렇다면 JavaScript 라이브러리로서 React의 주요 문제점은 무엇입니까?

React는 처음에 JavaScript 용으로 개발되지 않았습니다

React를 자세히 살펴보면 주요 원칙 중 일부가 JavaScript와 관련이 없음을 알 수 있습니다. 불변성, 함수형 프로그래밍 원칙 및 유형 시스템에 대해 이야기 해 봅시다.

불변성은 React의 핵심 원칙 중 하나입니다. 소품이나 상태를 변경하지 않으려는 경우 예측할 수없는 결과가 발생할 수 있습니다. JavaScript에서는 기본적으로 불변성이 없습니다. 우리는 규칙에 의해 데이터 구조를 불변으로 유지하거나 불변의 JS와 같은 라이브러리를 사용하여이를 달성합니다.

React는 응용 프로그램이 기능 구성이므로 기능 프로그래밍의 원칙을 기반으로합니다. JavaScript에는 일류 함수와 같은 일부 기능이 있지만 기능적인 프로그래밍 언어는 아닙니다. 멋진 선언적 코드를 작성하려면 Lodash / fp 또는 Ramda와 같은 외부 라이브러리를 사용해야합니다.

그렇다면 타입 시스템은 어떤가요? React에는 PropType이있었습니다. 정적 형식 언어가 아니기 때문에 JavaScript에서 형식을 모방하는 데 사용했습니다. 고급 정적 타이핑을 이용하려면 Flow 및 TypeScript와 같은 외부 종속성을 다시 사용해야합니다.

반응 및 JavaScript 비교

보시다시피 JavaScript는 React의 핵심 원칙과 호환되지 않습니다.

JavaScript보다 React와 더 호환되는 다른 프로그래밍 언어가 있습니까?

다행히도 ReasonML이 있습니다.

이유에서, 우리는 즉시 불변성을 얻습니다. 기능적 프로그래밍 언어 인 OCaml을 기반으로하기 때문에 언어 자체에도 이러한 기능이 내장되어 있습니다. 이유는 또한 자체적으로 강력한 유형 시스템을 제공합니다.

반응, JavaScript 및 이유 비교

이유는 React의 핵심 원칙과 호환됩니다.

이유

새로운 언어가 아닙니다. 20 년 이상 사용되어 온 기능 프로그래밍 언어 인 OCaml을위한 대체 JavaScript와 유사한 구문 및 툴체인입니다. 프로젝트 (Flow, Infer)에서 이미 OCaml을 사용한 Facebook 개발자가 이유를 만들었습니다.

C와 유사한 구문을 사용하는 이유는 JavaScript 또는 Java와 같은 주류 언어 사용자가 OCaml에 접근 할 수 있도록합니다. 더 나은 문서 (OCaml과 비교)와 그 주변의 커뮤니티를 제공합니다. 또한 기존 JavaScript 코드베이스와 쉽게 통합 할 수 있습니다.

OCaml은 이유에 대한 지원 언어로 사용됩니다. 이유는 OCaml과 동일한 의미를 갖습니다. 구문 만 다릅니다. 이는 Reason의 JavaScript와 유사한 구문을 사용하여 OCaml을 작성할 수 있음을 의미합니다. 결과적으로 강력한 유형 시스템 및 패턴 일치와 같은 OCaml의 멋진 기능을 활용할 수 있습니다.

이유 구문의 예를 살펴 보겠습니다.

fizzbuzz = (i) =>하자
  스위치 (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "피즈"
  | (_, 0) => "버즈"
  | _ => string_of_int (i)
  };
for (i in 1 to 100) {
  JS 로그 (fizzbuzz (i))
};

이 예에서는 패턴 일치를 사용하고 있지만 여전히 JavaScript와 매우 유사합니다.

그러나 브라우저에 사용할 수있는 유일한 언어는 여전히 JavaScript이므로 컴파일해야합니다.

버클 스크립트

Reason의 강력한 기능 중 하나는 BuckleScript 컴파일러입니다.이 컴파일러는 Reason 코드를 가져와 데드 코드를 크게 제거하여 읽기 쉽고 성능이 뛰어난 JavaScript로 컴파일합니다. 모든 사람이 이유에 익숙하지 않은 팀에서 작업하는 경우 가독성을 높이 평가할 수 있습니다. 여전히 컴파일 된 JavaScript 코드를 읽을 수 있기 때문입니다.

JavaScript와의 유사성은 너무 가깝기 때문에 컴파일러에서 일부 이유 코드를 변경할 필요가 없습니다. 따라서 코드를 변경하지 않고도 정적으로 유형이 지정된 언어의 이점을 누릴 수 있습니다.

추가하자 = (a, b) => a + b;
추가 (6, 9);

이것은 이유와 JavaScript 모두에서 유효한 코드입니다.

BuckleScript에는 Belt라는 표준 라이브러리 (OCaml 표준 라이브러리로는 충분하지 않음)와 JavaScript, Node.js 및 DOM API에 대한 바인딩의 네 가지 라이브러리가 제공됩니다.

BuckleScript는 OCaml 컴파일러를 기반으로하기 때문에 Babel보다 훨씬 빠르며 TypeScript보다 몇 배 빠른 엄청나게 빠른 컴파일을 얻을 수 있습니다.

Reason to JavaScript로 작성된 FizzBuzz 알고리즘을 컴파일 해 봅시다.

BuckleScript를 통해 JavaScript로 이유 코드 컴파일

보시다시피 결과 JavaScript 코드는 꽤 읽을 수 있습니다. JavaScript 개발자가 작성한 것 같습니다.

Reason은 JavaScript로 컴파일 될뿐만 아니라 네이티브 및 바이트 코드로 컴파일됩니다. 따라서 이유 구문을 사용하여 단일 애플리케이션을 작성하여 MacOS, Android 및 iOS 전화의 브라우저에서 실행할 수 있습니다. Jared Forsyth의 Gravitron이라는 게임이 Reason으로 작성되었으며 방금 언급 한 모든 플랫폼에서 실행할 수 있습니다.

자바 스크립트 interop

BuckleScript는 또한 JavaScript 상호 운용성을 제공합니다. 작동하는 JavaScript 코드를 Reason 코드베이스에 붙여 넣을 수있을뿐만 아니라 Reason 코드도 해당 JavaScript 코드와 상호 작용할 수 있습니다. 즉, 이유 코드를 기존 JavaScript 코드베이스에 쉽게 통합 할 수 있습니다. 또한, 이유 코드에서 NPM 에코 시스템의 모든 JavaScript 패키지를 사용할 수 있습니다. 예를 들어 Flow, TypeScript 및 Reason을 단일 프로젝트에서 결합 할 수 있습니다.

그러나 그렇게 간단하지 않습니다. Reason에서 JavaScript 라이브러리 또는 코드를 사용하려면 Reason 바인딩을 통해 먼저 Reason으로 이식해야합니다. 다시 말해, Reason의 강력한 유형 시스템을 활용하려면 유형이 지정되지 않은 JavaScript 코드에 대한 유형이 필요합니다.

이유 코드에서 JavaScript 라이브러리를 사용해야 할 때마다, 이유 패키지 색인 (Redex) 데이터베이스를 찾아 라이브러리가 이미 이유로 이식되었는지 확인하십시오. Reason 바인딩을 사용하여 Reason 및 JavaScript 라이브러리로 작성된 다양한 라이브러리 및 도구를 집계하는 웹 사이트입니다. 라이브러리를 찾은 경우이를 종속성으로 설치하고 Reason 애플리케이션에서 사용할 수 있습니다.

그러나 라이브러리를 찾지 못한 경우 이유 바인딩을 직접 작성해야합니다. Reason으로 시작하는 경우, Reason의 생태계에서 가장 어려운 과제 중 하나이므로 바인딩을 작성하는 것은 시작하려는 것이 아닙니다.

다행스럽게도 이유 바인딩 작성에 대한 게시물을 작성하고 있으므로 계속 지켜봐 주시기 바랍니다.

JavaScript 라이브러리의 일부 기능이 필요한 경우 라이브러리 전체에 대한 이유 바인딩을 작성할 필요가 없습니다. 사용해야하는 기능이나 구성 요소에 대해서만이를 수행 할 수 있습니다.

이유

이 기사는 ReasonReact 라이브러리 덕분에 React in Reason을 작성하는 것에 관한 것입니다.

아마도 "이유에서 왜 React를 사용해야하는지 아직도 모르겠습니다."

우리는 이미 그렇게하는 주요 이유를 언급했습니다. 이유는 JavaScript보다 React와 더 호환됩니다. 왜 더 호환됩니까? React는 이유를 위해 또는보다 정확하게 OCaml을 위해 개발 되었기 때문입니다.

이유에 이르는 길

React의 첫 번째 프로토 타입은 Facebook에서 개발되었으며 OCaml의 사촌 인 Standard Meta Language (StandardML)로 작성되었습니다. 그런 다음 OCaml로 옮겨졌습니다. 반응은 또한 JavaScript로 전사되었습니다.

웹 전체가 자바 스크립트를 사용하고 있었기 때문에“지금 우리는 OCaml에서 UI를 구축 할 것입니다.”라고 말하는 것이 현명하지 않았기 때문입니다.

그래서 우리는 JavaScript 라이브러리로 반응하는 데 익숙해졌습니다. Elm, Redux, Recompose, Ramda 및 PureScript와 같은 다른 라이브러리 및 언어와 함께 반응하면 JavaScript의 기능적 프로그래밍이 대중화되었습니다. Flow와 TypeScript의 등장으로 정적 타이핑도 인기를 얻었습니다. 결과적으로 정적 유형의 기능적 프로그래밍 패러다임이 프론트 엔드 세계에서 주류가되었습니다.

2016 년 Bloomberg는 OCaml을 JavaScript로 변환하는 컴파일러 인 공개 소스 BuckleScript를 개발하고 공개했습니다. 이를 통해 OCaml의 강력한 유형 시스템을 사용하여 프런트 엔드에 안전한 코드를 작성할 수있었습니다. 그들은 최적화되고 엄청나게 빠른 OCaml 컴파일러를 가져 와서 백엔드 생성 네이티브 코드를 JavaScript 생성 코드로 교체했습니다.

BuckleScript의 출시와 함께 함수형 프로그래밍의 인기로 인해 Facebook이 ML 언어로 작성된 React의 원래 아이디어로 되돌아 갈 수있는 이상적인 환경을 만들었습니다.

이유

그들은 OCaml 의미론과 JavaScript 구문을 취하고 이유를 만들었습니다. 또한 React (ReasonReact 라이브러리)를 중심으로 한 Reason 래퍼 (Reason wrapper)를 만들었습니다. 상태 기반 구성 요소의 Redux 원칙 캡슐화와 같은 추가 기능이 포함되었습니다. 그렇게함으로써 그들은 React를 원래의 뿌리로 되돌 렸습니다.

이성의 반응의 힘

React가 JavaScript에 들어 왔을 때 다양한 라이브러리와 도구를 도입하여 JavaScript를 React의 요구에 맞게 조정했습니다. 이것은 또한 우리 프로젝트에 더 많은 의존성을 의미했습니다. 이러한 라이브러리는 아직 개발 중이며 변경 사항이 정기적으로 도입되고 있습니다. 따라서 프로젝트에서주의해서 이러한 종속성을 유지해야합니다.

이로 인해 JavaScript 개발에 또 다른 복잡성이 추가되었습니다.

일반적인 React 애플리케이션에는 최소한 다음과 같은 종속성이 있습니다.

  • 정적 입력 — 흐름 / 유형 스크립트
  • 불변성 — 불변성 JS
  • 라우팅 — ReactRouter
  • 서식 — 더 예쁘다
  • 보푸라기 — ESLint
  • 도우미 기능 — Ramda / Lodash

이제 ReasonReact를 위해 JavaScript React를 교체합시다.

우리는 여전히이 모든 의존성이 필요합니까?

  • 정적 입력 — 내장
  • 불변성 — 내장
  • 라우팅 — 내장
  • 서식 — 내장
  • 보푸라기 — 내장
  • 도우미 기능 — 내장

내 다른 게시물에서 이러한 기본 제공 기능에 대해 자세히 알아볼 수 있습니다.

ReasonReact 애플리케이션에서는 개발을 쉽게 해주는 많은 중요한 기능이 언어 자체에 이미 포함되어 있으므로 이러한 종속성 및 기타 여러 종속성이 필요하지 않습니다. 따라서 패키지 유지 관리가 쉬워지고 시간이 지남에 따라 복잡성이 증가하지 않습니다.

이것은 20 년이 넘은 OCaml 덕분입니다. 핵심 원칙을 모두 갖추고 안정된 성숙한 언어입니다.

마무리

처음에는 Reason의 제작자에게는 두 가지 옵션이있었습니다. JavaScript를 취하고 어떻게 든 더 나아지게하십시오. 그렇게함으로써 그들은 또한 역사적 부담을 다룰 필요가있었습니다.

그러나 그들은 다른 길을 갔다. 그들은 OCaml을 뛰어난 성능을 가진 성숙한 언어로 받아들이고 그것을 JavaScript와 비슷하게 수정했습니다.

반응은 또한 OCaml의 원칙을 기반으로합니다. 그렇기 때문에 Reason과 함께 사용하면 개발자 경험이 훨씬 향상됩니다. 강력한 유형의 시스템이 돌아 왔으며 대부분의 JavaScript (레거시) 문제를 처리 할 필요가 없기 때문에 이유의 반응은 React 구성 요소를 빌드하는보다 안전한 방법을 나타냅니다.

무엇 향후 계획?

JavaScript의 세계에서 온다면 JavaScript와 구문의 유사성으로 인해 Reason을 시작하기가 더 쉬울 것입니다. React에서 프로그래밍 한 경우 ReasonReact가 React와 동일한 정신 모델과 매우 유사한 워크 플로를 갖기 때문에 모든 React 지식을 사용할 수 있으므로 훨씬 쉬워집니다. 즉, 처음부터 시작할 필요가 없습니다. 개발하면서 이유를 배우게됩니다.

프로젝트에서 이유를 사용하는 가장 좋은 방법은 점진적으로 수행하는 것입니다. 이미 Reason 코드를 가져 와서 JavaScript 및 다른 방법으로 사용할 수 있다고 언급했습니다. ReasonReact로 동일한 작업을 수행 할 수 있습니다. ReasonReact 컴포넌트를 가져 와서 React JavaScript 애플리케이션에서 사용하거나 그 반대로 사용하십시오.

이 증분 방식은 Facebook Messenger 앱 개발에 Reason을 광범위하게 사용하는 Facebook 개발자가 선택했습니다.

React in Reason을 사용하여 애플리케이션을 빌드하고 실용적인 방식으로 Reason의 기본 사항을 배우려면 Tic Tac Toe 게임을 함께 빌드 할 다른 기사를 확인하십시오.

질문, 비판, 관찰 또는 개선을위한 팁이 있으면 아래에 의견을 쓰거나 Twitter 또는 내 블로그를 통해 저에게 연락하십시오.