자바스크립트의 확장 문법
코드가 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨
//JSX
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
//변환된 코드
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}
이처럼 JSX를 사용하면, HTML 코드를 작성하는 것과 비슷한 형태로 매우 편하게 UI를 렌더링할 수 있음을 알 수 있다!
li 태그 두 개를 넣었을 때 빨간 줄이 쫙 뜨던 것을 기억한다. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 하기 때문이었다. 이걸 지켜야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
div 태그, 또는 Fragment (<></>)로 감싸 주면 된다.
//Fragment 사용 예시
import React from 'react';
function App() {
return (
<>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
JSX 내에서는 코드를 {}로 감싸서 자바스크립트 표현식을 쓸 수 있다.
import React from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
JSX 내부 자바스크립트 표현식에서 if문을 사용할 수는 없다. {} 안에서 쓰다가 안 돼서 한참을 당황했던 기억이 있다...
삼항연산자로 if else문을 대신하거나, JSX 밖에서 if문을 사용하여 사전에 값을 설정해야 한다.
import React from 'react';
function App() {
const name = '리액트';
return (
<>
{name === '리액트' ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</>
);
}
export default App;
조건부 연산자(삼항연산자) 말고도 간단하게 &&를 사용한 조건부 렌더링이 가능하다. 이는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
import React from 'react';
function App() {
const name = '리액트';
return (
<>{name === '리액트' && <h1>리액트입니다.</h1>}</>
//왼쪽 항이 참일 때만 오른쪽 항이 렌더링
);
}
export default App;
잠깐만뇨
falsy한 값인 0은 예외적으로 화면에 나타난다고 합니다const number = 0; return number && <div>내용</div>
위 코드는 화면에 숫자 0을 보여 준다.
리액트 컴포넌트에서는 undefined가 반환되어 렌더링하는 상황에서 오류가 발생한다. 이를 방지하기 위해서는 OR 연산자(||)를 사용하면 된다.
import React from 'react';
function App() {
const name = undefined;
return (name || '값이 undefined입니다.');
}
export default App;
반면 JSX 내부에서는 undefined가 렌더링 되어도 상관 없다고 한다...! 뭐여
import React from 'react';
function App() {
const name = undefined;
return (<div>{name}</div>); //okay
}
export default App;
리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 background-color
처럼 - 문자가 포함되는 이름은 카멜케이스로 바뀌어 backgroundColor
가 된다.
// style 객체를 미리 선언한 경우
import React from 'react';
function App() {
const name = '리액트';
const style = {
backgroundColor: 'black',
fontSize: '48px',
padding: 16 //단위 생략하면 px로 지정
};
return (<div style={style}>{name}</div>);
}
export default App;
// 바로 style 값 지정하는 경우
import React from 'react';
function App() {
const name = '리액트';
return (
<div
style={{
backgroundColor: 'black',
fontSize: '48px',
padding: 16
}}
>
{name}
</div>
);
}
export default App;
일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>
와 같이 class라는 속성을 설정한다. 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.
// src/App.css
.react {
background-color: aqua;
font-size: 48px;
padding: 16px;
}
// src/App.js
import React from 'react';
import './App.css';
function App() {
const name = '리액트';
return <div className="react">{name}</div>;
}
export default App;
HTML 코드를 작성할 때는 가끔 닫지 않은 상태의 태그들이 사용되기도 한다. 예를 들면 <input>
, <br>
태그들은 닫지 않아도 문제 없이 작동한다. 하지만 JSX에서는 <input></input>
처럼 반드시 태그를 닫아 주어야 한다. 태그 사이에 별도의 내용이 들어가지 않으면 <input/>
처럼 self-closing 태그를 사용해도 된다.
JSX 내부에서 주석을 작성할 때는 {/* ... */}
와 같은 형식으로 작성한다. 시작 태그를 여러 줄로 작성하게 된다면 그 내부에서 // ...
와 같은 형식으로 작성 또한 가능하다. 하지만 그 이외 부분에서는 다 화면에 나타나게 된다.