[컴][웹] React 의 JSX 와 coffeescript 함께 사용하기

커피스크립트에서 jsx 사용하기 / 커피스크립트와 React class / coffeescript with React class / Reactjs 에서 coffeescript 사용하기



updated : 2015.10.12

extends React.Component

• You can use CoffeeScript classes with React - pros and cons - Arkency Blog
• Reusable Components | React

coffee script 의 class 의 방법을 이용해서 React class 를 작성할 수 있다. 이제 아래와 같은 작업이 가능하다고 한다. 자세한 글은 위의 링크를 보자.

주의할 점은 this 의 사용이다. 이전처럼 알아서 event handler 등에서 this 가 binding 되지 않는다.

MyComponent = React.createClass(
  getInitialState : ()->
    {msg : 123}


  getDefaultProps: ()->
    bar: 'baz'


  handleAccountSubmit: (info)->
    {account, bank} = info
    console.log("request with login info #{account}, #{bank}")
    this.setState(
      msg : "test"
    )

  render: ->
    `(
       <div>
         <MyForm onSubmitHandler={this.handleAccountSubmit} />
       </div>
    )`
)

class MyComponent extends React.Component
  # static variable
  @defaultProps =
    bar: 'baz'

  constructor: (props) ->
    super props
    @state =
      msg: 123



  handleAccountSubmit: (info)=>
    {account, bank} = info
    console.log("request with login info #{account}, #{bank}")
    this.setState(
      msg : "test"
    )

  render: ->
    `(
       <div>
         <MyForm onSubmitHandler={this.handleAccountSubmit} />
       </div>
    )`

이렇게 하고 jsx 는 아래의 방법을 따라가면 된다.

---

coffeescript 에서 JSX 사용하는 방법

React 를 보고 있는데, coffeescript 를 사용하고 싶었다. 그런데 이 React 에서 사용하는 JSX compilation 이 coffeescript 에서 제대로 동작하는 지 몰라서 방법을 찾아봤다.

ref. 1 을 통해, JSX 와 coffeescript 를 같이 사용하는 방법에 대해 살펴볼 수 있다. With JSX 에서 JSX 를 같이 사용하는 방법 2가지를 확인할 수 있다. 방법은 아래와 같다.

1. `(backtick) 를 이용하는 방법
2. jsdf/coffee-react-transform 를 이용하는 방법 : coffeescript 에 적혀있는 jsx 를 coffeescript 로 변경 해 준다.
3. GitHub - jsdf/coffee-react : coffee-react-transform 보다는 이것이 나아보인다. jsx code 를 포함한 coffee script 를 javascript 로 변환해 준다.

개인적으로 1번을 사용하는 것이 나을 듯 하다. 2번이 나쁘지는 않지만, React 버전에 따라 계속 update 되어야 하는 것 같아서 아직 진화(?)중인 React 에선 버전을 맞추는 것이 좋지 못한 작업이 될 듯 하다. 물론 추측에 지나지 않다.

See Also

• https://github.com/i5on9i/reactjstemplate
• JSX Gotchas | React : JSX 와 HTML 의 차이점을 알려준다.
• ES6 Classes : ES6 에 도입되는 class 에 대해서 차이점을 알려준다. 이 부분이 coffeescript 의 class 부분과 같은 맥락이 된다.

Reference

1. CoffeeScript Love: React and CoffeeScript, with or without JSX