React 에서 사용하는 JSX 문법
리액트 프로젝트를 생성하고 난 뒤, App.js 파일에 들어가 보면 아래와 같은 코드가 작성되어 있습니다.
이는 App이라는 컴포넌트를 만들어 주며, functin 키워드를 사용하였으므로 함수형 컴포넌트라고 부릅니다.
위의 코드들이 마치 HTML을 작성한 것처럼 유사해 보이지만, HTML과는 다른 점이 있습니다. 비슷하면서도 사실은 다른 것이죠. 이렇게 react에서 사용하는 코드를 JSX 라고 부릅니다.
JSX란?
- 자바스크립트의 확장 문법
브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
- JSX는 자바스크립트의 공식적인 문법이라고 할 수는 없습니다.
- 즉, 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 이를 사용하는 이유가 됩니다.
JSX 문법의 특징 및 준수사항
- 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다.
1
2
3
4
5
6
function App(){
return(
<h1>테스트1</h1>
<h2>테스트2</h2>
)
}
위처럼 요소가 두 개 이상 존재하므로 그것을 감싸는 요소가 있어야 합니다. 위는 에러가 발생합니다.
1
2
3
4
5
6
7
8
function App(){
return(
<div>
<h1>테스트1</h1>
<h2>테스트2</h2>
</div>
)
}
이처럼 바깥을 div 로 감싼 모습입니다.
이렇게 감싸는 이유는, 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
- 자바스크립트 표현 : 자바스크립의 값을 JSX 안에서 렌더링할 수 있습니다.
name의 값을 {name} 과 같이 넣어서 렌더링할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name}</h1>
<h2>test</h2>
</>
);
}
export default App;
- JSX 내부의 자바스크립트 표현식 내에서 if문을 사용할 수 없어서, 조건부 연산자(삼항 연산자)를 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function App() {
const name = '리액트';
return (
<div>
{name === '리액트'? (
<h1>리액트</h1>
) : (
<h2>리액트가 아님</h2>
)}
</div>
);
}
- undefined를 렌더링하지 않아야 합니다.
1
2
3
4
function App() {
const name = undefined;
return name;
}
- 이는 아래와 같이 OR 연산자를 사용해 방지할 수 있습니다.
1
2
3
4
function App() {
const name = undefined;
return name || "값이 undefined";
}
- 단, JSX 내부에서 undefined를 렌더링 하는 것은 에러가 나지 않습니다.
1
2
3
4
5
6
function App() {
const name = undefined;
return (
<div>{name}</div>
)
}
기존에 HTML에서 스타일을 지정할 때 background-color 와 같이 - 문자가 포함된 이름들을, JSX에서 사용할 때에는 -를 없애고 카멜 표기법으로 작성해야 합니다.
예 : background-color -> backgroundColor
1
2
3
4
5
6
7
8
9
10
function App() {
const style = {
backgroundColor: 'white',
fontSize: '10px',
fontWeight: 'bold'
}
return (
<div style={style}>테스트</div>
)
}
- div 등에 class라는 속성을 설정할 때, 기존에 HTML의 경우
1
2
3
<div class="classEx1">
</div>
와 같이 표현했다면, JSX에서는
1
2
3
<div className="classEx1">
</div>
으로 className이라고 표시해야 합니다.
- HTML 등에서 input 태그 등은 별도로 닫지 않아도 괜찮았지만, JSX에서는 반드시 닫아주는 태그를 작성해야 합니다.
1
2
3
<input></input>
// 혹은 다음과 같이 self-closing 태그로 작성해도 무방
<input />
- JSX 내에서 주석을 작성할 때에는 { /* … */ } 와 같은 형식으로 작성합니다.
- 시작 태그를 여러 줄로 작성 시, 그 내부에서 // 를 사용하여 주석을 작성할 수도 있습니다.
1
2
3
4
5
<div
className="classEx1" // 주석 작성 가능
>
</div>
이 포스팅은 리액트를 다루는 기술(저자 김민준)을 학습하는 과정에서 개인적으로 정리한 내용입니다.