JSX란?
JSX(Javascript Syntax eXtension)는 Javascript를 확장한 문법이다.
특징
- JSX는 React로 프로젝트를 개발할 때 사용되므로 공식적인 javascript 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨(babel)을 사용하여 일반 javascript 형태의 코드로 변환한다.
- JSX는 하나의 파일에 javascript와 HTML을 동시에 작성하여 편리하다.
바벨(babel) 이란?
javascript의 컴파일러로, JSX를 javascript 형태의 코드로 변환해주는 역할을 한다.
예시
아래와 같은 JSX 코드를
function App() {
return (
<h1>Hello, Heera!</h1>
);
}아래와 같이 javascript 코드로 변환해준다.
function App() {
return React.createElement("h1", null, "Hello, Heera!");
}JSX 기본 규칙(문법)
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
Virtual DOM에서 Component 변화를 감지할 때 효율적으로 비교할 수 있도록 Component 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.
에러 예시
import React from 'react';
function Hello() {
return (
<h1>인사</h1>
<div>안녕하세요</div>
)
}
export default Hello;
정상 코드
import React from 'react';
function Hello() {
return (
<div>
<h1>인사</h1>
<div>안녕하세요</div>
</div>
)
}
export default Hello;
Fragments 선언 또 다른 방법
fragments - react 문서
import React from 'react';
function Hello() {
return (
<React.Fragment>
<h1>인사</h1>
<div>안녕하세요</div>
</React.Fragment>
)
}
export default Hello;단축 문법
Fragments를 선언하기 위해 <> </>(빈 태그)로만 표시하기도 한다.
import React from 'react';
function Hello() {
return (
<>
<h1>인사</h1>
<div>안녕하세요</div>
</>
)
}
export default Hello;2. javascript 표현식
JSX 안에서도 javascript 표현식을 사용할 수 있다.
javascript 표현식을 작성하려면 JSX 내부에서 코드를 {} 로 감싸주면 된다.
예시
import React from 'react';
function Hello() {
let name = 'Heera';
return (
<div>
<h1>인사</h1>
<div>안녕하세요</div>
<div>{name}입니다.</div>
</div>
)
}
export default Hello;결과
3. if문,for문 대신 삼항 연산자,조건부 연산자 사용
if문과 for문은 javascript 표현식이 아니기 때문에 JSX 내부 javascript 표현식에서는 사용할 수 없다.
그렇기 때문에 JSX 주변 코드에서 if문, for문을 사용하거나, {} 안에서 삼항 연산자 또는 조건부 연산자를 사용한다.
JSX 주변 코드에서 if문 작성
import React from 'react';
function Hello() {
let desc = '';
let isHeera = true;
if(isHeera) {
desc = <div>안녕하세요, Heera입니다.</div>;
} else {
desc = <div>안녕하세요, 아무개입니다.</div>;
}
return (
<>
{desc}
</>
)
}
export default Hello;JSX 내부에서 삼항연산자 작성
import React from 'react';
function Hello() {
let isGildong = true;
return (
<>
<div>
{isGildong === true ? (
<div>안녕하세요, 홍길동입니다.</div>
) : (
<div>안녕하세요, 아무개입니다.</div>
)}
</div>
</>
)
}
export default Hello;
&&(AND 연산자) 사용
AND 연산자를 사용하면, 조건이 하나라도 충족되지 않을 시 아무것도 노출시키지 않는다.
import React from 'react';
function Hello() {
let isGildong = true;
let age = 26;
return (
<>
<div>
{isGildong === true && age < 30 ? (
<div>안녕하세요, 홍길동입니다.</div>
) : (
<div>안녕하세요, 아무개입니다.</div>
)}
</div>
</>
)
}
export default Hello;4. React DOM은 HTML attribute 이름 대신 camelCase 명명 규칙을 사용한다.
JSX에서 javascript 문법을 쓰려면 {}를 써야하기 때문에 style을 적용할 때에도 객체 형태로 넣어주어야 한다.
이때, attribute들의 이름을 모두 camelCase로 작성해준다.
style 작성 예시
import React from 'react';
function Hello() {
const gildongStyle = {
color: 'red',
fontSize: '20px'
}
let isGildong = true;
let age = 26;
return (
<>
<div>
{isGildong === true && age < 30 ? (
<div style={gildongStyle}>안녕하세요, 홍길동입니다.</div>
) : (
<div>안녕하세요, 아무개입니다.</div>
)}
</div>
</>
)
}
export default Hello;5. 주석 사용 방법
JSX 내에서 주석은 {/* 주석주석 */} 와 같은 형식을 사용한다.
import React from 'react';
function Hello() {
return (
<>
{/* 인사말 입니다 */}
<h1>안녕하세요. 히룽지입니다.</h1>
</>
)
}
export default Hello;태그 안에서는 //도 사용가능하다.
import React from 'react';
function Hello() {
return (
<>
{/* 인사말 입니다 */}
<h1
// 시작태그에 내용이 많을 경우 이렇게도 가능합니다.
>안녕하세요. 히룽지입니다.</h1>
</>
)
}
export default Hello;