<commit_before>---
layout: post
title:  "react jsx"
date:   2016-12-06
categories: react
tags: javascript react
excerpt: "react jsx"
---

## JSX
 - XML은 특성을 이용한 요소 트리로 UI를 표현하는 데 아주 적합하다.
 - 애플리케이션의 구조를 시각화하기 쉬우며 더 간결하다.
 - 일반 자바스크립으므로 언어의 의미를 변형시키지 않는다

## HTML 차이
 - 태그 특성은 낙타 표기법으로 작성한다.
 - 모든 요소는 짝이 맞아야 한다.
 - 특성 이름은 HTML 언어 사양이 아닌 DOM API에 기반을 둔다.

## 단일 루트 노드
리턴 되는 값은 단일 노드 이어야 한다.

### 사용불가
```javascript
 return(
   <h1>Hello world</h1>
   <h1>Hello world</h1>
 )
```

### 사용가능
```javascript
 return(
  <div>
   <h1>Hello world</h1>
   <h1>Hello world</h1>
  </div>
 )
```

## 조건절
`if` 문을 사용할 없지만 `삼항식`은 사용이 가능하다.

```javascript<commit_msg>Update 2016-12-06-react-jsx.md<commit_after>---
layout: post
title:  "react jsx"
date:   2016-12-06
categories: react
tags: javascript react
excerpt: "react jsx"
---

## JSX
 - XML은 특성을 이용한 요소 트리로 UI를 표현하는 데 아주 적합하다.
 - 애플리케이션의 구조를 시각화하기 쉬우며 더 간결하다.
 - 일반 자바스크립으므로 언어의 의미를 변형시키지 않는다

## HTML 차이
 - 태그 특성은 낙타 표기법으로 작성한다.
 - 모든 요소는 짝이 맞아야 한다.
 - 특성 이름은 HTML 언어 사양이 아닌 DOM API에 기반을 둔다.

## 단일 루트 노드
리턴 되는 값은 단일 노드 이어야 한다.

### 사용불가
```javascript
 return(
   <h1>Hello world</h1>
   <h1>Hello world</h1>
 )
```

### 사용가능
```
 return(
  <div>
   <h1>Hello world</h1>
   <h1>Hello world</h1>
  </div>
 )
```

## 조건절
`if` 문을 사용할 없지만 `삼항식`은 사용이 가능하다.

```javascript
{'fraction_non_alphanumeric': 0.15072685539403213, 'fraction_numerical': 0.030604437643458302, 'mean_word_length': 2.684507042253521, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4414923', 'n_tokens_mistral': 900, 'n_tokens_neox': 1063, 'n_words': 191}