mixin예전에 있었던 기능으로 복잡함.

https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.htmlhttps://en.wikipedia.org/wiki/MixinIn object-oriented programming languages, a mixin is a class that contains methods for use by other classes without having to be the parent class of those other classes

자바스크립트 코드로 mixin배우려니 빡쳐서 찾아보니http://blog.saltfactory.net/ruby/understanding-mixin-using-with-ruby.htmljs에서 mixin가지고 노는것은 미친짓.

fb에선 mixin이 암시적인 의존성을 가진다고 생각. 이름 충돌, 복잡성증가

HOC(Higher Order Component)

HOCs are not part of the React APIconst EnhancedComponent = higherOrderComponent(WrappedComponent);HOCs are common in third-party React libraries, such as Redux's connect and Relay's createContainer.python decorator랑 비슷하게 구현.

this.props.key : https://facebook.github.io/react/docs/lists-and-keys.html

list의 자식엘리먼트(li)같은걸 코드로 생성할때 const todoItems = todos.map((todo) =>

this.props.ref

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. When to Use Refs# * Managing focus, text selection, or media playback. * Triggering imperative animations. * Integrating with third-party DOM libraries.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);this.focus=this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return(
      <div>
        <inputtype="text"ref={(input) => { this.textInput = input; }} />
        <inputtype="button"value="Focus the text input"onClick={this.focus}/>
      </div>
    );
  }
}

tool

https://github.com/facebook/react-devtoolshttps://facebook.github.io/react/docs/perf.html

virtual dom speed

props internal component state

parent = data => child

• data flow one way from top to down
• immutable

PropTypes static typechecking

SFC: Stateless Functional Component

props 와 state

• state는 독립적인 컴포넌트의 상태고, prop은 외부(부모) 컴포넌트에게 받은 속성이다
• Redux 프로젝트에서 prop는 애플리케이션에서 전역으로 관리하는 상태라고 생각하면 된다.
• 요약하면 컴포넌트 자체의 상태(색상, 애니메이션 등)는 state로 처리하고, 전체적으로 관리해야 하는 상태(서버와 동기화하는 데이터 등)는 부모 컴포넌트에서 prop으로 받아 처리한다. 물론 prop을 갱신하면 App 컴포넌트가 전반적으로 갱신되기 때문에 state를 갱신하는 것보다는 비교적 느리다. 효과적으로 state를 사용하면 좋지만, prop으로 처리해야 하는 작업을 state로 처리하면 오히려 코드 작성이 더 어려워진다. state와 prop의 차이에 관한 더 자세한 내용은 "props vs state"를 참고한다. React에서 구분하는 prop와 state의 차이에 관해서는 "Thinking in React"의 'Step 3: Identify The Minimal (but complete) Representation Of UI State'를 참고한다.

Ref.

• React 적용 가이드 - React와 Redux

redux

• Redux 프로젝트에서 prop는 애플리케이션에서 전역으로 관리하는 상태라고 생각하면 된다.
• https://github.com/reactjs/redux

핫 코드 리로드를 위해

flux store와는 달리, 로직과 상태를 분리

타임 트래블

• action이 store로 전달시, 기존 상태 복사 후 복사본을 수정.
• 앱에서 사용하는 모든 state를 하나의 tree로 관리 - 하나의 트리라서 관리 문제 발생!

flux

• https://facebook.github.io/flux/
• flux store
  1. 상태 변환을 위한 로직
  2. 현재 어플리케이션 상태

Etc

• https://github.com/lilactown/helix

reagent

https://github.com/reagent-project/reagent

• cljsjs/react
• cljsjs/react-dom

(defn hello-component [name]
  [:p "Hello, " name "!"])

(defn say-hello []
  [hello-component "world"])

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

class SayHello extends React.Component {
  render() {
    return <Hello name"world" />;
  }
}

• 특성 props state

  • parent 컴포넌트에 의해 값이 변경 될 수 있는가? 예 아니오
  • 컴포넌트 내부에서 변경 될 수 있는가? 아니오 예
  • ref: https://velopert.com/921

• reagent.core/atom

  • deref

• reagent.core/create-class

  • If you don’t use ES6 classes, you may use the create-react-class module instead. See Using React without ES6 for more information.

(r/create-class
 {:component-did-mout ...
  :reagent-render ...})

Element

• https://reagent-project.github.io/news/news050.html

• reagent.core/create-element

  • https://reactjs.org/docs/react-api.html#createelement

• reagent.core/as-element

  • turns Reagent’s hiccup forms into React elements,

   (r/create-element "div"
                     #js{:className "foo"}
                     "Hello "
                     (r/as-element [:strong "world"]))

• r/adapt-react-class

(def div-adapter (r/adapt-react-class "div"))

(defn adapted []
  [div-adapter {:class "foo"}
   "Hello " [:strong "world"]])

• https://reagent-project.github.io/news/news060-alpha.html
• reagent.core/track
• rswap!
• getInitialState
• componentWillMount
• reagent/dom-node

this (r/current-component)
(r/props this) ;; this.props
(r/children this) ;; this.props.children

• r/next-tick

• r/wrap

  • The new wrap function combines two parts – a simple value, and a callback for when that value should change – into one value, that happens to look as an atom.
  • The first argument to wrap should be the value that will be returned by @the-result.
  • The second argument should be a function, that will be passed the new value whenever the result is changed (with optional extra arguments to wrap prepended, as with partial).

• reagent.core/cursor

  • https://reagent-project.github.io/news/news050.html

• Values and references

  • So what’s the difference between wraps and cursors? Why have both?
  • A wrap is just a value that happens to look like an atom. It doesn’t change unless you tell it to. It is a very lightweight combination of value and a callback to back-propagate changes to the value. It relies only on Reagent’s equality test in :should-component-update to avoid unnecessary re-rendering.
  • A cursor, on the other hand, will always be up-to-date with the value of the source atom. In other words, it acts a reference to part of the value of the source. Components that deref cursors are re-rendered automatically, in exactly the same way as if they deref a normal Reagent atom (unnecessary re-rendering is avoided by checking if the cursor's value has changed using identical?).

:ref

• https://github.com/reagent-project/reagent/blob/master/doc/FAQ/UsingRefs.md

:<>

• react fragment
  • https://reactjs.org/docs/fragments.html
  • Add :<> shorthand for React Fragments (#352)
  • https://stackoverflow.com/questions/64181996/what-is-in-reagent-hiccup

re-frame

(repo / README)

• ClojureScript로 작성된 re-frame은 SPA만들때 쓰는 패턴입니다.
• re-frame은 내부적으로 reagent를 활용합니다.
• Reaktor Talks: Esko Lahti, Developing Web Applications With Reagent/re-frame

https://day8.github.io/re-frame/

• 간락한 개념.

DB ->
  뷰 ->
    Reagent ->
      React ->
        렌더링.
        <- 이벤트 발생.
      <- 이벤트 큐잉
    <- 이벤트 처리 (인터셉터와 함께), 이펙트 발생.
  <- 이펙터 처리.
DB

• 키워드로 보는 개념.

app-db ->
  [:hiccup] ->
    (r/render-component component dom-root) ->
    (rf/subsribe query-id) ->
      React ->
        Dom ->
          Render
          <- (rf/dispatch event)
          <- [event ...]
        <- (rf/reg-event-fx event-id [interceptor ...] (fn [cofx event]))
          <- rf.cofx/inject-db :before
          <- (rf/->interceptor :before)
          <- (fn [cofx event] ...)
          <- (rf/->interceptor :after)
          <- rf.fx/do-fx :after
          <- [effect ...]
    <- (rf/reg-fx effect-id (fn [event-value] ...)
  <- (rf/reg-sub query-id (fn [db] ...))
  <- (rf/reg-sub query-id (fn [db] ...))
app-db

용어설명

kind reg-*

register handler
:event-db
:event-fx
:event-ctx
:sub
:sub-raw
:fx
:cofx

drawing board
reg-view
reg-interceptor

(rf/reg-event-db
   :event-id
   (fn [db event]
     (assoc db :some :thing)))

(rf/reg
  {:kind  :event-db
   :id    :event-id
   :fn    (fn [db event]
            (assoc db :some :thing))})

(rf/reg
  [{:kind :event-db ...}
   {:kind :event-db ...}
   {:kind :event-fx ...}
   {:kind :sub ...])

Registrar

Each entry stored in the registrar will become a map instead of just a handler.

Map keys:

:kind - somehow redundant
:id
:doc
:line
:ns
:doc
:fn the handler

`re-com` is a library which supplies reusable Reagent widgets. And widgets, like a datepicker, are the simplest kind of components.
`re-com` components are reusability because they take an input stream of data and they

`def-view`: TODO

DB : (app-db / db)

{...}

event

[event-id & args]

Event (event)

Effect (effect / fx)

• https://github.com/Day8/re-frame/blob/master/docs/API.md
• 내장 이펙트

[:db `db`]

[:dispatch `event`]

[:dispatch-n [(nil | `event`) ...]]

[:dispatch-later [ (nil | {:ms `int` :dispatch `event`}) ...]]

[:deregister-event-handler `event-id`]

[:deregister-event-handler [`event-id` ...]]

Coeffect (coeffect / cofx)

• http://tomasp.net/coeffects/
• the data your event handler requires from the world in order to do its computation (aka side-causes)
• 내장 코-이펙트

{
 :local-store `local-store`
 :db `db` ;; `current-app-state`
}

contextmap (context, ctx)

{:coeffects {:event [:some-id :some-param]
             :db    <original contents of app-db>}

 :effects   {:db    <new value for app-db>
             :dispatch  [:an-event-id :param1]}

 :queue     <a collection of further interceptors>
 :stack     <a collection of interceptors already walked>}

• https://github.com/Day8/re-frame/blob/master/docs/EventHandlingInfographic.md

raise

(rf/dispatch `event`)

(rf/dispatch-sync `event`)

queueing

[event1 event2 event3 ...]

event-routeter

(rf/reg-event-fx
  `event-key`
  (fn [`cofx` `event`]
    `effect`))
;;=> {...} => [[`effect-key` `effect-value`] ...]

(rf/reg-event-fx
  `event-key`
  [`interceptor` ...]
  (fn [`cofx` `event`]
    `effect`))
;;=> {...} => [[`effect-key` `effect-value`] ...]

(reg-event-db
  `event-key`
  (fn [`db` `event`]
    `new-db`))
;;=> {:db `new-db`} => [[:db `new-db`]]

(reg-event-db
  `event-key`
  (fn [{:key [db]} `event`]
    (assoc db :a 10)))

(reg-event-fx
  `event-key`
  (fn [{:key [db]} `event`]
    {:db (assoc db :a 10)}))

(reg-event-ctx
  `event-key`
  (fn [`context-map` `event`]
    `context-map`)

effect-routeter

[[`effect-key` `effect-value`] ...]

apply effect

• built-in : :db, :dispatch, ``

(rf/reg-fx
  `effect-key`
  (fn [`effect-value`]
     ...))

interceptor

• built-in
  • debug
  • trim-v
• built-in factory
  • enrich
  • path
  • after
  • inject-cofx
• built-in more : std_interceptors.clj

{:id      `cofx-id`
 :before  (fn [context] ...)
 :after   (fn [context] ...)}

(rf/inject-cofx `cofx-id` arg)

(rf/->interceptor
 :id     `cofx-id`
 :before handle-context
 :after  handle-context)

(reg-cofx
   `cofx-id`
   (fn [`cofx` arg]
      `cofx`))

reg-sub / subscribe

• https://github.com/Day8/re-frame/blob/master/docs/SubscriptionFlow.md
• (ns re-frame.subs)

{:name "Bruce"}

(rf/reg-sub
  :get-name
  (fn [db _]
    (name db))) => "Bruce"

(rf/reg-sub
  :greeting
  (fn [db _]
    (rf/subscribe :get-name))
  (fn [name _]
    (st "Hello, " name))) => "Hello, Bruce"

@(rf/subscribe :greeting) => "Hello, Bruce"

  1. (reg-sub
       :test-sub
       (fn [db [_]] db))

  ;; The value in app-db is passed to the computation function as the 1st argument.

  2. (reg-sub
       :a-b-sub
       (fn [q-vec d-vec]
         [(subs/subscribe [:a-sub])
          (subs/subscribe [:b-sub])])
       (fn [[a b] [_]] {:a a :b b}))

  ;;  Two functions provided. The 2nd is computation function, as before. The 1st
  ;;  is returns what `input signals` should be provided to the computation. The
  ;;  `input signals` function is called with two arguments: the query vector
  ;;  and the dynamic vector. The return value can be singleton reaction or
  ;;  a sequence of reactions.

  3. (reg-sub
       :a-b-sub
       :<- [:a-sub]
       :<- [:b-sub]
       (fn [[a b] [_]] {:a a :b b}))```
(let [value @(rf/subsribe `query-id`)])



(rf/reg-sub
  `query-id`
  (fn [db event] ; computation-fn
    value))

(rf/reg-sub
  `query-id`
  (fn [query-vec dynamic-vec]
    [(subscribe [:a-sub])
     (subscribe [:b-sub])])
  (fn [[a b] query-vec]
    ....))

Ref

• https://docs.google.com/drawings/d/1ptKAIPfb_gtwwSqYmt-JGTkwPVm_6LeWjjm-FcWznBs/edit

• https://github.com/Day8/re-frame/blob/master/docs/FAQs/DoINeedReFrame.md

• Router

  • https://github.com/Day8/re-frame/blob/master/src/re_frame/router.cljc#L8-L60

• Subscription & EventHandler

  • https://github.com/Day8/re-frame/blob/master/docs/FAQs/UseASubscriptionInAnEventHandler.md

• Logger

  • https://github.com/Day8/re-frame/blob/master/docs/FAQs/Logging.md

• on-click.event handle

  • https://github.com/Day8/re-frame/blob/master/docs/FAQs/Null-Dispatched-Events.md

• WIP - EventError Handling

  • https://github.com/Day8/re-frame/issues/231#issuecomment-249991378

• Custom event-handler define

  • https://github.com/Day8/re-frame/blob/master/docs/FAQs/GlobalInterceptors.md

Boot

• 프로젝트 관리 프로그램이 있어야겠다. boot를 사용하자.

• 새 프로젝트 생성은 boot-new를 이용하자.

    boot -d boot/new new -t app -n sample
  

Fileset

TODO(pyoung) boot fileset설명. :resource-paths : .jar에 포함되는 파일.

Task

(serve)

fileset을 기본으로하는 http 서버

	(serve :port 8080 :httpkit true)

(cljs)

• cljs.edn
• compiler-options
• (cljs)는 fileset(:resource-paths, :source-paths포함)에 있는 *.cljs.edn을 찾아 *.js를 생성한다.
• :ids
  • :ids는 boot.core/by-path를 사용한다. boot.core/by-path는 path인식시 윈도우즈(\), xnix(/)를 다르게 인식한다.
  • ref: https://github.com/boot-clj/boot-cljs/pull/118

figwheel

• 예전에는 Figwheel을 많이 사용했지만, 현재는 shadow-cljs를 많이 사용한다.
• https://figwheel.org/
  • https://github.com/bhauman/figwheel-main
  • https://github.com/bhauman/lein-figwheel