React JSX

JSX

jsx 는 React 가 사용하는 표현 기술

const element = <h1>Hello, world!</h1>

//속성 추가가 쉽다
const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

 

자바스크립티 예약어인 아래 두가지는 다르게 표현해야 합니다

• class 는 className
• for 는 htmlFor 로 표현해서 사용해야 합니다

하나의 div 로 묶여야 합니다 (render 가 단일 node 만 반환하므로 여러개의 노드는 하나의 div 로 묶어주면 됩니다)

// JSX 표현
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

// PlanJS 로 표현
ReactDOM.render(
  React.DOM.div(
    { id: 'test' },
    React.DOM.h1(null, 'A title'),
    React.DOM.p(null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX 내에서 {중괄호} 로 JavaScript 코드를 넣을 수 있습니다

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

JSX 내에서 HTML 표현시에는 camelCase 를 사용해야 합니다

• onchange => onChange
• onclick => onClick
• onsubmit => onSubmit
• class => className
• for => htmlFor

JSX 내 CSS

//style 속성은 객체만 받아들입니다
var divStyle = {
  color: 'white'
}

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)

JSX 의 Form

value 는 현재값, defaultValue 는 초기값

<textarea>Some text</textarea>

//=> textarea 값도 defaultValue 로 전환

<textarea defaultValue={'Some text'} />



<select>
  <option value="x" selected>
    ...
  </option>
</select>


//=> selected 를 defaultValue 로 전환

<select defaultValue="x">
  <option value="x">...</option>
</select>

 

JSX 내에서 주석처리

<p>
  {/* a comment */}
  {
    //another comment
  }
</p>

JSX 내에서 Spread 속성

<div>
  <BlogPost title={data.title} date={data.date} />
</div>

// Spread Attributes 사용이 가능하다
<div>
  <BlogPost {...data} />
</div>

JSX 내에서 반복문 처리

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) {
  items.push(<li key={index}>{value}</li>)
}

return (
  <div>
    {items}
  </div>
)

const elements = ['one', 'two', 'three'];
return (
  <ul>
    {elements.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)