ClojureScript 및 React로 기능적 프런트 엔드를 구축하는 방법을 알아보세요.

React에 대해 들어보셨을 것입니다. 그리고 Reagent에 대해 들어보셨나요? Reagent는 ClojureScript와 React 사이의 최소한의 인터페이스입니다.

ClojureScript는 Elm, ReasonML 및 EcmaScript와 마찬가지로 JavaScript로 컴파일/트랜스파일됩니다.

Reagent를 사용하면 일반 ClojureScript 함수 및 데이터 구조 외에는 아무것도 사용하지 않고 구성 요소를 정의할 수 있습니다.

몇 가지 예를 살펴보고 어떻게 비교하는지 살펴보겠습니다. 이것은 React에 대한 폭언이 아닙니다. 리액트는 굉장해! JS에 대한 호언 장담도 아닙니다. JS도 굉장합니다! 이것은 변경 불가능하고 지속적인 데이터 구조를 가진 언어에서 React가 어떻게 보이는지 보여주기 위한 것입니다.

상태 비저장 구성 요소

Reagent와 React에서 가장 간단한 구성 요소는 바로 함수입니다.



JavaScript에서 매우 자주 const 하나의 라이너로 표시됩니다.

const HelloMessage = props => <div>Hello {props.name}</div>;

상태 저장 구성 요소

Reagent는 CLJS(ClojureScript) 불변 데이터 구조 위에 구축되므로 추가 라이브러리(Redux, MobX) 또는 구문(this.setState)이 상태와 함께 작동할 필요가 없습니다. CLJS에서는 상태를 처리하기 위해 atoms(CLJS의 참조 유형)를 사용합니다.



이 예에서는 let — 함수 내부에 atom에 대한 defn 바인딩을 생성합니다. let 바인딩은 함수 범위 내에서만 사용할 수 있으며 swap! (증가) 함수를 사용하여 값을 on-click로 inc -ing합니다.

수명 주기 메서드가 있는 클래스 구성 요소

이 예제는 수명 주기 메서드가 있는 클래스 구성 요소를 보여줍니다.



시약에서는 1% 미만으로 사용합니다. 그 이유는 — 원자 업데이트해야 할 때를 추적하기 때문입니다. Reagent에서 componentDidMount가 필요 없이 이 구성 요소를 작성할 수 있습니다.

(defn timer []
  (let [seconds (r/atom 0)]
    (fn []
      (js/setInterval #(swap! seconds inc) 1000)
      [:div
       "Seconds: " @seconds])))

더 알고 싶으세요?

ClojureScript 및 Reagent에 대해 자세히 알아보려면 이 비디오 과정FREE을 시도하고 GIGGIN 앱을 빌드하십시오.

자세한 내용은 learnreagent.com에서 확인하세요.

그리고 이 기사가 마음에 든다면 DEV에서 저를 팔로우해야 합니다. 저는 프로그래밍과 기술에 대해서만 글을 쓰거나 트윗합니다.