📝 JSX
JSX는 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼습니다.
JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
//JSX 코드
function App(){
return(
<h1>Hello</h1>
);
}
export default App;
//바벨을 사용하여 자바스크립트 코드로 변환된 코드
function App(){
return React.createElement("h1", null, "Hello");
}컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 React.createElement 함수를 사용해야 하는 것은 매우 불편합니다.
📝 JSX의 장점
1. 보기 쉽고 익숙하다
위처럼 일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드만 봐도 가독성이 높고 작성하기 쉽다고 느껴집니다.
2. 활용도가 높다
JSX에서는 div나 span과 같은 HTML태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX 안에서 작성할 수 있습니다.
📝 JSX 문법
1. 부모 요소 하나로 감싸야 함
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
//error case
function App() {
return (
<div>Hello</div>
<div>Hi</div>
);
}
export default App;
요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생했습니다.
📜 해결 방법
1. div 태그로 감싸는 방법이 있습니다.
2. 리액트 v16 이상부터 도입 된 Fragment라는 기능이 있습니다.
import { Fragment } from 'react';
function App() {
return (
<Fragment>
<div>Hello</div>
<div>Hi</div>
</Fragment>
);
}
export default App;코드 상단 import 구문에서 react 모듈에 들어 있는 Fragment라는 컴포넌트를 추가로 불러옵니다.
3. 빈 태그를 사용합니다.
import { Fragment } from 'react';
function App() {
return (
<>
<div>Hello</div>
<div>Hi</div>
</>
);
}
export default App;2. 자바스크립트 표현
JSX 안에서는 자바스크립트 표현을 쓸 수 있습니다.
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.
function App(){
const name = 'React';
return(
<>
<div>Hello</div>
<div>{name}</div>
</>
);
}
export default App;3. if문 대신 조건부 연산자
JSX 내부에서는 if 문을 사용할 수 없습니다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됩니다.
조건부 연산자의 다른 이름은 삼항 연산자입니다.
function App(){
const name = 'React';
return(
<>
{name === 'React' ? (
<div>True</div>
):(
<div>False</div>
)}
</>
);
}
export default App;4. AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여주고 만족하지 않을 때는 아무것도 렌더링하지 않아야 할 때도 조건부 렌더링을 할 수 있습니다.
function App(){
const name = 'React';
return <div>{name === 'React' && <h1>True</h1>}</div>;
}
export default App;5. class 대신 className
일반 HTML에서는 class를 사용하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 합니다.
function App(){
const name = 'React';
return <div className="react">{name === 'React' && <h1>True</h1>}</div>;
}
export default App;