JSX 기본 규칙
오늘은 리액트 컴포넌트를 만들때 사용하는 JSX에 대해 알아보자. JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다.
얼핏보기에는 HTML처럼 생겼지만 사실은 Javascript이다. Babel을 통해 XML 형태의 코드가 JS로 변환된다. 그런데, 이 JSX로 작성한 코드가 Babel을 통해 JS로 잘 변환되려면 준수해야할 몇 가지 규칙들이 있다.
그 규칙들에 대해서 살펴보자.
- 태그는 반드시 닫아주어야 한다.
function App() {
return (
<div>
);
}여는 div만 있고 닫는 div는 없으면 안된다. 그런데, <input> 태그나 <br> 태그 처럼 닫는 태그를 사용하지 않는 태그들이 있다. 이 경우 <input />처럼 self closing 태그를 사용한다.
- 두 개 이상의 태극는 꼭 하나의 태그로 감싸져 있어야 한다.
functin App() {
return (
<div>
<Hello />
</div>
);
}위 코드의 경우 <div> 태그와 <Hello /> 태그 두 개가 있는데 감싸져있지 않다.
이 경우 <div>태그를 만들어 감싸줄 수 있다.
function App() {
return (
<div>
<div>
<Hello />
</div>
</div>
);
}그런데 이 방법은 불필요한 div 태그를 만들었다는 것이 마음에 들지 않을 수 있다. 이 div로 인해 스타일 속성들이 꼬일 수 있고 div로 감싼 태그들이 table 태그일 경우 div로 감싸기 애매한 상황들이 생길 수 있다.
이럴 경우, fragment를 사용할 수 있다.
function App() {
return (
<>
<div>
<Hello />
</div>
</>
);
}비어있는 태그(fragment)를 사용하면 불필요한 div 사용을 하지 않아도 된다.
추가적으로 설명하자면, 앞선 코드에서 return 다음에 소괄호를 만든 후 JSX를 작성하였다. 이 소괄호는 단순히 가독성을 높이려고 사용했다. 소괄호를 쓰지 않고 바로 JSX를 쓰면 태그들이 같은 레벨에 있지 않아 독해가 힘들어 질 수 있다. 만약 return 다음에 한줄 짜리 코드라면 소괄호를 생략해도 좋다.
JSX에서 Javascript 값 사용하기
이번에는 JSX 내부에서 JS 값을 사용하는 방법에 대해서 알아보자.
function App() {
const name = 'react';
return (
<>
<Hello />
<div></div>
</>
);
}예를 들어, const name = 'react'; 라는 문이 있고 JSX 내부에서 이 name 이라는 상수를 사용하고 싶다고 가정해보자.
이럴땐 어떻게 표현해야 할까?
function App() {
const name = 'react';
return (
<>
<Hello />
<div>{name}</div>
</>
);
}단순히 name이라고 입력하면 name이라는 글자가 그대로 출력된다. 이때는 name을 중괄호로 묶어서 표현할 수 있다.
JSX에서 스타일과 클래스 설정하는 방법
HTML에서 inline 방식으로 스타일을 입히는 방법은 다음과 같다.
<div style="background-color: black"> name </div>그런데 이 방식은 JSX에서 작동하지 않는다. 그 대신 객체를 만들어 주어야 한다.
function App() {
const name = 'react';
const style = {
backgroundColor: 'black',
color: 'aqua',
// font-size는 단위를 생략하면 기본적으로 px로 간주한다.
fontSize: 24,
// 단위를 정해주고 싶다면 문자열로 입력한다.
padding: '1rem'
};
return (
<>
<Hello />
// JSX 스타일 적용
<div style={style}>{name}</div>
</>
);
}JSX에서 스타일을 적용하는 방법을 알아봤으니 이제 클래스를 적용하는 방법에 대해 알아보자.
HTML에서는 다음과 같이 클래스 이름을 지어주었다.
<div class="name">name</div>그러면 JSX에서는 어떤 방법으로 클래스 이름을 설정해야 할까?
우선, App.css 파일로 들어가 모든 내용을 지우고 스타일을 추가한다.
.gray-box {
background-color: gray;
width: 64px;
height: 64px;
}그리고 다시 App.js 로 돌아가 css 파일을 import 한다. import './App.css';
function App() {
const name = 'react';
const style = {
backgroundColor: 'black',
color: 'aqua',
fontSize: 24,
padding: '1rem'
};
return (
<>
<Hello />
<div className="gray-box" style={style}>{name}</div>
</>
);
}JSX에서는 className을 통해 클래스 이름을 부여할 수 있다. 사실, class라고 해도 작동이 가능하긴 하다. 작동은 가능하나 브라우저에서 경고를 띄운다.
작동 가능하다 해서 class를 써도 되는 것은 아니다. className을 사용하도록 하자.
JSX에서 주석달기
원래 우리가 사용하는 주석을 JSX에서 그대로 사용하면 화면에 노출된다.
function App() {
return (
/* 어쩌고 저쩌고 */
<>
<Hello />
<div></div>
</>
);
}따라서 JSX에서 주석을 달려면 중괄호를 사용해서 작성해야 한다.
function App() {
return (
{/* 어쩌고 저쩌고 */}
<>
<Hello />
<div></div>
</>
);
}태그 안에 주석을 달아줄 수 도 있다.
function App() {
return (
{/* 어쩌고 저쩌고 */}
<>
<Hello
// 이렇게 작성한 주석은 화면에 보이지 않는다.
/>
<div
// 프론트엔드 짱!
></div>
</>
);
}