Section0. 4-가독성을 위한 JSX(XML임!)

클래스 문법으로 React 코딩하는 것을 한번 보여준다.
클래스 문법은 진짜 복잡하다.
그래서 JSX가 생김.

class 문법으로 코딩하기 (너무 복잡함)

return e('button', {onClick: () => this.setState({liked: true})}, 'Like');

그래서 JSX가 생김 (좀 더 인간 친화적으로 바뀜)

jsx : javascript + xml

return (
<button onClick={()=>this.setState({liked:true})}>
	Like
</button>
);

 

Babel

하지만 js에서 < 이런 태그 같은거 해석하지 못해서 babel 이라는 라이브러리를 사용해야한다. babel이 <button> 이러한

jsx 태그를 React.createElement 같은 것으로 바꿔준다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

바벨을 사용하는 가장 쉬운 방법은 위의 코드를 붙여넣기하고, 바벨이 바꿔주길 원하는 부분의 <script>를

<script type="text/babel">로 바꿔놓으면 된다.

 

React 규칙

1. 컴포넌트는 대문자로 시작

2. jsx에서 자바스크립트 코드를 사용하기 위해서는 { } 사용 (jsx에서 객체를 생성하려면 {{a:'b', b:'c'}} 이런식으로 해야한다.)

3. jsx에서 html 태그를 사용하기 위해서는 소문자로 사용 (닫는 태그 필수)

4. jsx에서는 if와 for를 사용하지 못한다. if 대신에 삼항연산자, for 대신에 Array.map 을 사용한다.

5. jsx의 return() 에서 최상위 태그는 1개만 존재해야한다. (<> ~ </> Fragment라는 태그를 많이 사용함.)