JSX 란?
자바스크립트의 확장문법으로 XML과 비슷하게 생겼고 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링(여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미)되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환됨
function App(){
return (
<div>
Hello <b>react</b>
</div>
);
}위의 코드가
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null "react"));이렇게 변환됨
그리고,,
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;위의 return 안에 해당하는 HTML 같이 생긴 것이 JSX 코드
리액트 컴포넌트를 만들 때 사용하는 언어로, .js로 파일을 생성하면, render()에서 자동 완성이 되지 않는다. 리액트에서는 .jsx로 작성해야 HTML이 자동완성이 된다.
JSX를 사용하는 이유
- 컴포넌트를 렌더링 할 때마다 위 코드처럼 매번 React.createElement 함수를 사용하지 않고 매우 편하게 UI를 렌더링 할 수 있음
JSX 문법 규칙
-
감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
WHY? 하나의 요소로 감싸줘야하는 이유는?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있음 -
자바스크립트 표현
JSX가 내부에서 코드를 { } 로 감싸면 자바스크립트 표현식을 작성할 수 있음 -
조건부 연산자
if 문을 사용할 수 없고 삼항 연산자 사용 가능 -
AND 연산자(&&)를 사용한 조건부 렌더링
특정조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황이 올 수 있는데, 이때 AND 연산자를 사용하면 더 짧은 코드로 작업 가능 -
undefined를 렌더링하지 않기
이러면 오류 발생
헉!!! 출처 까먹을뻔!
