4. React JSX(JavaScript Xml) 문법
JSX(JavaScript Xml)?
JSX는 JavaScript Xml의 약자입니다.
JSX를 설명하기 앞서 XML에 대해서 간단하게 정의하려고 합니다.
XML은 Extensible Markup Language의 약자이며, 사람과 기계가 동시에 읽기 편한 구조로 되어있다는 것이 특정입니다.
그러나 XML은 HTML처럼 데이터를 보여주는 목적이 아니라, 데이터를 저장하고 전달하는 것이 목적입니다.
XML의 주요 특정은 5가지 입니다.
1. 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어
2. 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환
3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성 우수
4. 데이터를 보여주지 않고, 데잉터를 전달하고 저장하는 것만을 목적
5. 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어져 있음
xml에 대한 자세한 내용은 기회가 되면 다뤄 보도록 하고 다시 JSX에 대한 설명을 하겠습니다.
JSX는 JavaScript언어의 확장형입니다. HTML형식과 유사한 구문을 사용하는데요. 지난번 Element에 대한 글에서
const hello = React.createElement('h1', {id: 'hello', title: 'hello world'}, 'hello world');
와같이 선언을 했었는데 이런 식으로 작성을 하게 되면 코드 양도 많아지고 불편하겠죠?
그래서 나온 언어입니다. 또한, 컴파일을 하기에 최적화되어 빠르다는 장점이 있습니다.
JSX를 사용하면 html처럼 <> 태그를 사용할 수 있습니다.
이전 글에서 작성한 app.js를 수정해보도록 하겠습니다.
app.js
| const hello = ( <h1 id='hello' title= 'hello world'>hello world</h1> ); |
* 참고 : babeljs.io 사이트에 가서 try it out에 가서 위 코드를 입력하면, creactElement 식의 코드로 변환되는 것을 확인할 수 있다.
이렇게 입력하시면, webstorm에서는 아래와 같은 게 생기 실 텐데요?
Switch를 눌러주시면 됩니다.
안 뜨시거나 settings에서 설정하시는 방법은요.
File -> settings -> Languages & Frameworks -> JavaScript에서 version을 React JSX로 바꿔주시면 됩니다.
그리고 index.html을 실행시켜보세요.
네... 아무것도 안 뜨죠?
f12를 눌러서 어떤 에러가 났는지 확인해보세요.
이러한 에러가 났을 거예요.
이제부터는 해결 방법을 알려드릴게요.
index.html에 라이브러리를 추가하는 것입니다.
index.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <link rel="stylesheet" href="./app.css" /> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel" src="./app.js"></script> </body> </html> |
위 코드에서 babel을 사용할 수 있도록 추가 및 변경해주세요.
그리고 다시 index.html을 실행해보세요.
그럼 그전에 확인했던 것과 똑같이 실행되는 것을 알 수 있습니다.
마지막 정리로 JSX를 사용하는 것에 대한 규칙을 작성하고 마치겠습니다.
1. type => 태그명으로 변경
2. props => 태그의 속성 형식으로 변경
3. children => 자식 노드로 변경
4. 반드시 닫는 태그가 있어야 함
5. 변수의 데이터 전달 : 자바스크립트 표현식 => { }
아래와 같이 app.js를 변경해서 hello라는 변수를 {}를 이용해서 사용할 수 있습니다.
| const hello = 'hello' const test = ( <h1 id='hello' title= 'hello world'>{hello} world</h1> ); ReactDOM.render( test, document.getElementById('root') ); |
6. 케밥 케이스는 캐멀 케이스로 작성 ( ex : background-color -> backgroundColor )
7. class 속성은 className으로 사용해야 한다 (이미 class라는 것을 사용하기 때문)
8. for는 htmlFor로 사용해야 한다.