이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 React.js 에서 사용되는 JSX 문법에 대하여 알아보겠습니다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있습니다.
- JSX는 컴파일링 되면서 최적화 되므로, 빠르다
- Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나타내지 않는 것 [출처: jerrypop 블로그]) 하며 컴파일링 과정에서 에러를 감지 할 수 있다.
- HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다.
1. JSX 사용하기
JSX는 HTML이랑 거의 비슷하게 생겼습니다. 저번강좌에서 작업환경을 설정 할 때도 App.js 에서 JSX가 사용되었는데요 한번 다시 봐볼까요?
App.js
import React from 'react';
class App extends React.Component {
render(){
return (
<h1>Hello Velopert</h1>
);
}
}
export default App;
- LINE 1: import 는 ES6 에 도입된 새로운 문법인데, var React = require(‘react’) 와 같습니다. React 모듈은 Component를 만들때 사용됩니다.
- LINE 3: class 개념 역시 ES6 에 새로 도입된 요소중 하나 입니다. 모든 Component는 React.Component 를 상속합니다. ES5 환경에서는 React.createClass() 라는 메소드를 사용합니다. 또한, ES5 에서 클래스를 만들때는 메소드들을 nest 할 수 없고 prototype을 사용했어야 했는데, 많이 편해졌죠. ES6 Class 에 대해서는 Mozilla 참고자료 에서 확인하세요.
- LINE 4: render() 메소드에서는 컴포넌트에 렌더링 될 데이타를 정의합니다.
- LINE 5~7: 이 부분이 JSX의 가장 중요한 부분입니다. 보시면, 자바스크립트에서 html 태그를 반환하는데, 따옴표같은건 없죠? React JSX 는 XML-like Syntax 를 native Javascript로 변환해줍니다. 따라서 ” ” 로 감싸지 않는 점 주의하시구요, ( ) 를 사용하지 않아도 오류는 발생하지 않지만 가독성을 위하여 사용하는것이 좋습니다.
확장자에 대하여..
JSX 파일의 확장자의 경우, 이전에는 개발자들이 .jsx 확장자를 사용하였지만 요즘은 .js 를 사용하는 추세로 전환되어 가고 있습니다. 페이스북의 오픈소스 에디터인 draftjs 는 구별을 제대로 하기 위하여 .react.js 확장자를 사용하기도 합니다. 이 강좌에서는 .js 확장자를 사용하도록 하겠습니다.
JSX VS JS
JSX 를 사용했을 때 와 사용하지 않았을 때를 비교해보고싶다면 다음 링크들을 클릭해보세요.
2. Nested Elements
컴포넌트에서 여러 Element 를 렌더링 해야 할 때, 그 element들을 필수적으로 container element 안에 포함시켜줘야됩니다.
예를들어 다음과 같이 코드를 작성하면:
return (
<h1> Hello Velopert</h1>
<h2> Welcome </h2>
);
변환 과정에서 다음과 같은 오류가 발생합니다.
ERROR in ./src/App.js
Module build failed: SyntaxError: /home/vlpt/node_tutorial/react/react-tutorials/03-jsx/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag (10:12)
8 | return (
9 | <h1> Hello Velopert</h1>
> 10 | <h2> Welcome </h2>
| ^
11 | );
12 | }
13 | }
다음과 같이 div element 를 wrapper 로 사용하면 오류가 발생하지 않습니다.
return (
<div>
<h1> Hello Velopert </h1>
<h2> Welcome </h2>
</div>
);
3. JavaScript Expression
JSX 안에서, JavaScript 표현을 사용하는 방법은 매우 간단합니다. 그냥 { } 로 wrapping 하면 됩니다.
render(){
let text = "Dev-Server"
return (
<div>
<h1> Hello Velopert </h1>
<h2> Welcome to {text}</h2>
</div>
);
}
- LINE 2: ES6 에 도입된 let 키워드는 var 과 비슷하지만, var 변수의 scope는 기본적으로 함수 단위인데 let 은 블럭 범위 내에서 변수를 선언합니다. 따라서 가끔 발생하는 javascript 의 Scope관련 문제를 해결 할 수 있습니다. 지금 이 상황에선 let 을 사용하는것이 필수는 아니지만, ES6 에선 평상시 let 을 쓰고 var은 필요한 상황에서만 사용하는게 좋습니다. let 에 관련된 정보는 Mozilla 참고자료 에서 더 읽어보세요.
- LINE 6:
{ text }를 사용하여 text Javascript 변수를 렌더링합니다.
임의 method 생성 및 사용하기
React 에서 method를 생성하고 사용하는 방법에 대하여 알아보겠습니다.
sayHey(){
alert("hey");
}
render(){
let text = "Dev-Server"
return (
<div>
<h1> Hello Velopert </h1>
<h2> Welcome to {text}</h2>
<button onClick={this.sayHey}>Click Me</button>
</div>
);
}
- LINE 11:
{this.sayHey}를 통해 버튼이 클릭되면 해당 메소드가 실행되게 할 수 있습니다. () 가 뒤에 안붙어있다는점을 주의해주세요. 만약에 () 가 붙으면 페이지가 로드 될때도 실행되고, 클릭할때도 실행됩니다.
If-Else 문 사용 불가
JSX 안에서 사용되는 JavaScript 표현에는 If-Else 문이 사용 불가합니다. 이에 대한 대안은 ternary ( condition ? true : false ) 표현을 사용하는 것입니다.
예: <p>{1 == 1 ? 'True' : 'False'}</p>
4. Inline Style
React의 Inline Style 에서는, string 형식이 사용되지 않고 key 가 camelCase 인 Object 가 사용됩니다.
한번 예제를 통하여 배워봅시다.
render(){
let text = "Dev-Server";
let pStyle = {
color: 'aqua',
backgroundColor: 'black'
};
return (
<div>
<h1> Hello Velopert </h1>
<h2> Welcome to {text}</h2>
<button onClick= {this.sayHey}>Click Me</button>
<p style = {pStyle}>{1 == 1 ? 'True' : 'False'}</p>
</div>
);
}
pStyle 이 p element 에 적용되었습니다.
5. 주석
JSX 안에서 주석을 작성할 때엔, { /* comments */ } 형식으로 작성하면 됩니다. 여기에 작성된 주석은 브라우저상 source 에서 나타나지 않습니다.
주의하실 점은 2. Nested Element 에서 나왔던 것 처럼 container element 안에 주석이 작성되어야 합니다.
6. Naming Convention
모든 React Component 은 첫 문자가 대문자인 CamelCase 로 작성됩니다.
마무리하며..
출력물
JSX 의 기본적인 형식을 알아보았습니다.
이 강좌에서 사용된 코드는
다음 강좌에서는 Component 에 대하여 자세히 알아보도록 하겠습니다.