[React] JSX 문법
JSX란 자바스크립트를 확장한 문법이다. 얼핏 보면 HTML과 비슷하여 템플릿 언어가 떠오를 수도 있지만, 자바스크립트의 모든 기능이 포함되어 있다. JSX를 제대로 사용하기 위해서 몇가지 규칙을 준수해줘야 한다. 이전 포스팅 [React] React 시작하기에 나온 App.js파일에 예제를 작성하여 진행하겠다. 기존의 코드는 지우고 클래스 방식으로 컴포넌트를 만들어준 뒤 아래 예제들을 살펴보겠다.
import React, { Component } from "react";
class App extends Component {
render() {
return <div></div>;
}
}
export default App;
JSX 엘리먼트 규칙
태그는 꼭 닫혀줘야 된다.
<div>를 열었으면 꼭</div>로 태그를 닫아주도록 한다. 또한 input이나 br태그 같은 단일 태그들은 HTML5에서 안닫아도 상관 없었지만, 리액트에서는 오류를 출력하므로 꼭 태그를 닫아주도록 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<input type="text"> // error
</div>
);
}
}
export default App;
하나의 엘리먼트로 감싸줘야 한다.
리턴값이 두개의 엘리먼트로 되어있으면 오류를 출력한다.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div> // error
my
</div>
<div>
app
</div>
);
}
}
export default App;
위 문제를 해결하기 위해서 두개의 엘리먼트를 하나의 엘리먼트로 감싸야 한다.
하나의 엘리먼트로 감싸기 까다로운 경우
하지만 위처럼 하나의 엘리먼트로 감싸기엔 까다로운 경우가 있다. CSS로 인한 스타일 관련 문제나 table관련 태그를 작성할 때 번거로운 경우이다. 이럴때는 아래처럼 Fragment을 사용하면 된다.(이 기능은 v.16.2에 도입되었다.)
import React, { Component, Fragment } from "react";
class App extends Component {
render() {
return (
<Fragment>
<div>my</div>
<div>app</div>
</Fragment>
);
}
}
export default App;
나눠진 엘리먼트를 Fragment로 감싼뒤 import의 { Component }에 Fragment을 추가하면 된다.
JSX 자바스크립트 사용하기
변수 사용하기
JSX 내부에서 변수를 사용 할 땐 아래처럼 할 수 있다.
import React, { Component } from "react";
class App extends Component {
render() {
const name = "my-app";
console.log(1);
return <div>hello {name} // hello my-app</div>;
}
}
export default App;
JSX 내부에 {}(중괄호)안에 자바스크립트 구문을 넣어 주면 된다.
조건부 렌더링
JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND연산자(&&)를 사용한다. 반면에 if문은 사용할 수 없으며, 사용하려면 즉시함수를 실행해야 한다.
삼항연산자
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
{1 + 1 === 2 ? ( // 참
<div>참</div>
) : (
<div>거짓</div>
)}
</div>
);
}
}
export default App;
AND연산자
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
{1 + 1 === 2 && ( // 참
<div>참</div>
)}
</div>
);
}
}
export default App;
참고로 AND연산자의 경우 true일때만 값을 보여주고, false일때는 아무것도 보여주지 않는다.
if문
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
{(function () {
if (1 + 1 === 2) {
// 참
return <div>참</div>;
} else {
return <div>거짓</div>;
}
})()}
</div>
);
}
}
export default App;
위처럼 JSX 내부에서 로직을 작성할 수 있지만 복잡한 로직을 작성해야 할 때는 JSX 밖에서 로직을 작성하는 것이 좋다. 하지만 꼭 JSX 내부에서 작성해야 한다면 위처럼 즉시실행함수를 사용하면 된다.
style과 className
JSX에서 CSS와 class명은 HTML에서 작성하는 방법과 약간 다르다.
import React, { Component } from "react";
class App extends Component {
render() {
const style = {
padding: "10px",
fontSize: "15px",
fontWeight: "bold",
backgroundColor: "yellow",
};
return <div style={style}>my-app</div>;
}
}
export default App;
HTML에서는 그냥 텍스트 형태로 ="padding: 10px; font-size: 15px;" 이런 형태로 작성하였다면 리액트에서는 객체 형태로 작성해줘야 한다. 그리고 class는 class대신에 className을 사용한다.
import React, { Component } from "react";
class App extends Component {
render() {
return <div className="App">my-app</div>;
}
}
export default App;
주석
주석은 아래처럼 {/* 내용 */} 사이에 넣거나, 태그 사이에 넣을 수 있다.
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
{/* 주석 내용 */}
<div
// 태그 사이에 주석 내용
>
my-app
</div>
</div>
);
}
}
export default App;