2.2 JSX란?
JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼지만 리액트용이기 때문에 공식 자바스크립트 문법은 아니다.
2.3 JSX 장점
- 보기 쉽고 익숙하다
- 오류를 바벨이 코드를 변환하는 과정에서 감지해낸다
- 더욱 높은 활용도
- HTML 태그를 사용
2.4 JSX 문법
1. 감싸인 요소
컴포넌트의 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다.
→ Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있기 때문!
리액트 v16 이상에서는 <Fragment> 태그를 사용하면 됨
2. 자바스크립트 표현
JSX 안에서 자바스크립트 표현식을 쓸 수 있다. 자바스크립트 표현식을 작성하려면 코드를 { }로 감싸면 된다.
import React, { Component } from 'react';
class App extends Component {
render () {
const text='텍스트';
return (
<div>
<h2>{text}</h2>
</div>
);
}
}
export default App;
3. if문 대신 조건부 연산자
JSX 내부에서는 if문을 사용할 수 없음! (처음 안 사실)
조건이 있는 경우를 렌더링해야 할 때는 JSX 밖에서 if문을 작성하거나 { } 안에 조건부 연산자(삼항)를 사용하면 된다.
import React, { Component } from 'react';
class App extends Component {
render () {
const condition=true;
return (
<div>
<h2>{text}</h2>
{
condition ? '참' : '거짓'
}
</div>
);
}
}
export default App;
4. &&를 사용한 조건부 렌더링
특정 조건을 만족할 때는 보여주고, 만족하지 않을 때는 보여주고 싶지 않을 때?
{ condition ? '보여주세요' : null }보다는
{ condition && '보여주세요' }사용
5. 인라인 스타일링
리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태가 아닌 자바스크립트 객체 형식으로 만들어서 적용해야 한다. 해당 객체에서 key는 camelCase로 작성한다.
6. class 대신 className
class 키워드는 자바스크립트에 존재하는 키워드이기 때문에 class 대신 className을 사용해야 한다.
7. 꼭 닫아야하는 태그
HTML에서는 <input>이나 <br> 태그는 닫지 않아도 되지만 JSX에서는 태그를 닫지 않으면 Virtual DOM에서 트리 구조를 만들지 못하기 때문에 오류가 발생한다.
따라서 JSX에서는 <input /> 이런식으로 태그를 닫아줘야 한다!
8. 주석
JSX 안에서 주석을 작성하는 방법은 자바스크립트 내에서 주석을 작성할 때와 다르다.
return (
<div className="my-div">
{/* 요소 밖에서는 이렇게 작성 */}
<h2>{text}</h2>
{ condition && '보여주세요' }
<div style={style}
//self closed 태그에서만 작동하는 주석
// 마지막에 />가 꼭 새 줄에 있어야 한다.
/* 이렇게도 쓸 수 있음 */
/>
// 여기에 쓰면 주석이 아니고 그대로 렌더링 된다.
</div>
일반 자바스크립트에서 주석을 작성할 때처럼 아무데나 //주석을 작성한다면 주석이 페이지에 렌더링된다.
+노션으로 쓰면 가독성이 좋은데 티스토리로 옮겨오면 코드 가독성이 왜이렇게 떨어지는교..
Uploaded by Notion2Tistory v1.1.0