[React.js] JSX
1. import React
import React, { Component } from 'react';자바스크립트에서 리액트를 사용하기 위해서는 위와 같이 리액트를 import 해야 한다.
class App extends Component {
render() {
return (
JSX
);
};
}컴포넌트를 만드는 방법은 class를 통해서 만드는 방식과 function을 통해서 만드는 방식이 있다. class를 통해서 만들 때는, Component를 상속받은 새로운 클래스(여기서는 App)를 만드는 것과 같다. 클래스 형태로 만들어진 컴포넌트에는 render 함수가 있어야 하며, 이 함수는 JSX를 return해야 한다.
export default App;작성한 컴포넌트를 다른 곳에서 사용하기 위해서 export를 하면 컴포넌트가 완성된다.
2. JSX(JavaScript eXtention)
JSX는 HTML 문법을 자바스크립트 코드 내부에 쓸 수 있도록 자바스크립트 문법을 확장한 것으로, HTML과 비슷한 형태를 가지고 있으나 몇 가지 추가적인 규칙이 있다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
Hello, React!
<input type="text" />
</div>
)
}
}
export default App;① 태그는 반드시 닫혀 있어야 한다. 위의 input과 같이 태그를 반드시 닫지 않아도 실행되는 경우에도, JSX에서는 반드시 태그를 닫아야 오류가 발생하지 않는다. 여기서는 self-closing을 사용해 닫았다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
Hello, React!
<input type="text" />
<input type="button" />
</div>
<div>
Hello, React!
<input type="text" />
<input type="button" />
</div>
)
}
}
export default App;② 최상위 부모 엘리먼트는 반드시 하나만 존재해야 한다. 위 코드와 같이 상위의 부모 태그 없이 형제 태그가 둘 이상 존재하는 경우에는 에러가 발생한다. 이 경우, 두 div 태그를 감싸는 새로운 div 태그를 만들어 줘야 할 필요가 있다.
import React, { Component, Fragment } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<div>
Hello, React!
<input type="text" />
<input type="button" />
</div>
<div>
Hello, React!
<input type="text" />
<input type="button" />
</div>
</Fragment>
)
}
}
export default App;혹은, Fragment를 이용해 div 태그를 감싸줄 수도 있다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = "React";
return (
<div>
Hello, {name}!
<input type="text" />
</div>
)
}
}
export default App;③ JSX 안에서 자바스크립트의 값을 이용할 때는 중괄호{}로 감싸야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = "kim";
const react = "Hello, React!";
const who = "Who are you?";
return (
<div>
{name === 'kim' ? react : who}
{name === 'kim' || ' go to hell!'}
{name === 'kim' && ' welcome!'}
</div>
)
}
}
export default App;④ JSX 안에서 조건문을 이용할 때는, 삼항 연산자나 논리 연산자를 이용한다. 위 코드는 name이 kim인 경우, "Hello, React!"와 "welcome!"을 출력할 것이고, kim이 아닌 경우 "Who are you?"와 "go to hell!"을 출력한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = "kim";
return (
<Fragment>
<div>
{(function(){
if (name === 'kim') return <div> {name}이다! </div>
if (name === 'park') return <div> {name}이다! </div>
else return <div> {name}, go away! </div>
})()}
</div>
<div>
{(() => {
if (name === 'kim') return <div> {name}이다! </div>
if (name === 'park') return <div> {name}이다! </div>
else return <div> {name}, go away! </div>
})}
</div>
</Fragment>
)
}
}
export default App;⑤ JSX 안에서 함수를 선언함과 동시에 호출함으로써 복잡한 조건문을 만들 수도 있다. 이 때의 함수는 익명함수이므로 화살표 함수로도 나타낼 수 있다. 위의 두 div는 같은 결과를 나타내며, name이 kim이나 park일 때는 각각 'kim이다!', 'park이다!'를 출력할 것이고, 그 외의 값은 go away!를 출력할 것이다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'kim';
const style = {
backgroundColor: 'black',
padding: '16px',
color: 'white',
fontSize: '24px'
};
return (
<div style={style}>
Hello, {name}!
</div>
)
}
}
export default App;⑥ JSX에 스타일을 적용할 때는 객체 형태로 입력하며, 속성은 CamelCase로, 값은 문자열 형태로 입력한다. 또한 태그에 적용할 때는 자바스크립트 요소이므로 중괄호{}를 사용한다.
// App.js
import React, { Component } from 'react';
import './Style.css';
class App extends Component {
render() {
const name = 'kim';
return (
<div className="App">
Hello, {name}!
</div>
)
}
}
export default App;// Style.css
.App {
background: black;
color: aqua;
font-size: 26px;
padding: 1rem;
font-weight: 600;
}⑦ JSX의 태그에 클래스를 부여할 때는 class가 아닌 className을 입력해야 한다. 위 코드에서는 div 태그에 App 클래스를 부여하고, Style.css 파일에서 App 클래스의 스타일을 지정한 뒤, 이를 import하여 스타일을 적용했다.
{/* 주석 */}⑧ 주석을 달 때는 멀티라인 주석/**/을 중괄호로 다시 감싼 형태로 사용한다.