자바스트립트를 확장한 문법으로, React와 함께 사용된다.
React에서는 렌더링 로직이 UI 로직과 연결되어있다는 전제가 깔려있다. 그래서 별도의 파일에 마크업과 로직을 분리하는 대신, 둘 다 포함하는 컴포넌트를 만드는 방식으로 동작한다.
작성된 JSX 코드는 브라우저에서 실행되기 전에 번들링 과정에서 Babel을 통해 JS코드로 변환된다.
JSX는 이렇게 HTML을 변수에 할당하는 것처럼 보이는 코드다.
const greeting = <h1>hello World! </h1>;
JSX에 입력되는 요소들은 하나의 부모 노드로 감싸져 있어야한다.
const greeting = (
<h1>
hello!
</h1>;
<h1>
world!
</h1>;
)
-> ❎
const greeting = (
<div>
<h1>
hello!
</h1>;
<h1>
world!
</h1>;
</div>
)
-> ✅
하지만 이렇게 되면 쓸데없는 container태그가 함께 입력된다.
이렇게 태그를 남용하는 것을 방지하기 위해 사용하는 것이 <fragment>
태그이다.
const greeting = (
<fragement>
<h1>
hello!
</h1>;
<h1>
world!
</h1>;
</fragment>
)
하지만 이것도 너무 길어보이니 더 짧게 <>
</>
만 작성하기도 한다.
const greeting = (
<>
<h1>
hello!
</h1>;
<h1>
world!
</h1>;
</>
)
변수를 선언한 후, 중괄호 안에 변수를 넣어 사용하는 것도 가능하다.
let name = 'minju';
const greeting = <h1>hello {name}! </h1>;
JSX를 여러줄에 나눠 표현하고 싶다면 괄호로 묶어 주어야한다.
let name = 'minju';
const greeting = (
<h1>
hello {name}!
</h1>;
)
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
값처럼 if구문 및 for loop에 사용 가능하고, 변수에 할당하고 인자로 사용되는 등 1급 객체의 특징을 갖고 있다.
하지만 js자체에 if문을 사용할 수 없기때문에, 삼항연산자를 사용한다.
let name = 'minju';
const greeting = (
<div>
{name == 'minju' ? (
<h1>
hello {name}!
</h1>;
) : (
<h1>
hello new user!
</h1>;
)}
</div>
);
만약 조건이 성립되지 않았을 때 아무것도 띄우고 싶지 않다면, null을 이용해서 표현 가능하다.
let name = 'minju';
const greeting = (
<div>
{name == 'minju' ? (
<h1>
hello {name}!
</h1>;
) : null}
</div>
);
이걸 &&를 이용해 더 짧고 간편하게 나타낼 수 있다.
let name = 'minju';
const greeting = (
<div>
{name == 'minju' ? && <h1> hello {name}! </h1>;}
</div>
);
이 때 조건문의 결과값이 숫자 0 이라면 예외적으로 화면에 출력됨.
undefined를 걸러내기 위해서 || 를 사용하는 방식도 있다.
속성에 카멜표기법으로 작성한다. 무 조 건
예를 들어 background-color 면 backgroundColor로 표기한다.
JSX는 자바스크립트로 변환되기 때문에 JS에서 사용중인 예약어를 속성으로 사용할 수 없다.
그래서 class를 표기할 때, html처럼 <div class="fruit">
이 아니라 <div className="fruit">
으로 표기해주어야 한다.
const style = {
backgroundColor = blue;
fontWeigh
}
const greeting = (
<h1 style = {style}>
hello!
</h1>;
)
Babel은 JSX를 React.createdElement() 호출로 컴파일한다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
이 코드와
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
이 코드는 같은 코드다. 그리고 이렇게 작성된 코드는
// 주의: 다음 구조는 단순화되었습니다
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
위와 같은 react 엘리먼트
객체를 생성한다. react는 이 객체를 읽어 DOM을 구성하고 최신 상태로 유지하는데 사용한다.
참고
https://reactjs.org/docs/introducing-jsx.html
https://thebook.io/080203/