JSX란?
🟢 JavaScript와 HTML을 섞어 쓸 수 있는 JavaScript의 확장된 문법이다.
const element = <h1>Hello, world!</h1>브라우저에서 실행 전에 Babel을 이용해 자바스크립트로 변환이 된다.
그래서 스크립트 태그에 type을 babel로 설정해 주어야 한다.<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type=text/babel src="jsx.js"><script>
JSX 문법
🔴 JavaScript 코드를 작성할 때에는 {} 안에 작성해야 한다.
표현식 넣기
const name = 'cloudcoke'
const element = <h1>Hello {name}</h1>🔵 표현식 : 1 + 2, user.name, getList(list) 등 값으로 평가될 수 있는 것
🔴 if문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 JavaScript 표현식에는 사용할 수 없다.
그래서 JSX 주변 코드에서 if문을 사용하거나 {} 내부에서 삼항 연산자를 사용한다.
case 1) JSX 주변 코드에서 if문 사용
class Admin extends React.Component {
constructor(props) {
super(props);
this.state = {
level: "admin",
};
}
render() {
if (this.state.level === "admin") {
return <div>관리자님 환영합니다.</div>;
}
return <div>잘못된 접근입니다.</div>;
}
}case 2) {} 내부에서 삼항 연산자를 사용
class Admin extends React.Component {
constructor(props) {
super(props);
this.state = {
level: "admin",
};
}
render() {
return <div>{this.state.level === "admin" ? "관리자님 환영합니다." : "잘못된 접근입니다."}</div>;
}
}속성 정의
🟢 문자열 리터럴 정의
const element = <a href="https://velog.io/@cloudcoke">CloudCoke's Velog</a>🟢 표현식 삽입
const element = <img src={user.profileImg} />- 중괄호 주변에 따옴표를 입력하면 Babel이 해석을 할 때 오류를 발생시킬 수 있다.
🟠 속성명은 카멜 케이스(Camel Case)로 작성해야 한다.
<button onClick={}>{this.state.isLogin ? "로그아웃" : "로그인"}</button>onclick,onblur,onfocus등과 같은 이벤트들을 JSX에서는onClick,onBlur,onFocus로 작성해야 한다.
🟠 HTML 비표준 속성을 다룰 때 사용하는 data-* 속성은 기존 HTML 문법 그대로 작성해야 한다.
<ul>
<li data-index="{this.state.comment.index}">{this.state.comment.content}</li>
</ul>🔴 JavaScript 예약어와 같은 속성명은 사용할 수 없다.
<form>
<label htmlFor="userid">아이디</label>
<input id="userid" className="uid" type="text" />
</form>for,class와 같은 JavaScript 예약어는htmlFor,className등으로 작성해야 한다.
비어있는 태그 닫기
const element = <img src={user.profileImg} />- 닫는 태그가 없는 HTML 태그들은
/>를 이용해 바로 닫아 주어야 한다.
엘리먼트 반환
🔴 여러개의 엘리먼트를 반환 시 반드시 하나의 엘리먼트로 감싸서 반환해야 한다.
class Test extends React.Component {
render() {
return (
<div>
<div>Hello</div>
<div>Bye</div>
<div/>
);
}
}- 하지만 감싸는
div가 필요하지 않다면 Fragments를 사용할 수 있다.
class Test extends React.Component {
render() {
return (
<React.Fragment>
<div>Hello</div>
<div>Bye</div>
<React.Fragment/>
);
}
}- 축약형으로 사용할 수도 있다.
class Test extends React.Component {
render() {
return (
<>
<div>Hello</div>
<div>Bye</div>
</>
);
}
}