- JSX는 (JavaSctipt XML)의 약자이다. Javascript에 XML을 추가한 자바스크립트의 확장 문법이고 XML과 매우 유사하게 생겼다.
- JSX는 리액트 프로젝트를 개발할 때 사용되므로 공식적인 자바스크림트 문법은 아니지만, 자바스크립트를 기반으로 하고 있다.
const element = <h1>Hello, world!</h1>;- 이 JSX는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환이 된다.
JSX 문법
➡️ 감싸인 문법
- 반드시 부모 요소 하나가 감싸는 형태여야 한다.
virtual Dom에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
function App() {
return (
<div>
<h1>안뇽</h1>
</div>
)
}
or
function App() {
return (
<Fragment>
<h1>안뇽</h1>
</Fragement>
)
}
or
function App() {
return (
<>
<h1>안뇽</h1>
</>
)
} ➡️ Javascript 표현식
- JSX 안에 자바스크립트 표현식을 중괄호로 묶어서 포함시킬 수 있다.
function App() {
return (
<div>
<h1>안뇽 내 이름은 {name}이야.</h1>
</div>
)
}➡️ if(for)문 대신 삼항연산자 사용
- JSX는 return문 안에서는 if와 for문 사용이 안 된다. 하지만 JSX 밖에서는 if문을 사용해서 사전에 값을 설정하는 것도 가능하다.
➡️ HTML 어트리뷰트 이름 대신 camelCase 사용
- JSX에서 자바스크립트 문법을 쓰려면 {}를 써야하기 때문에, 스타일을 적용할 때도 객체 형태로 넣어줘야 한다.
function App() {
const style = {
backgroundColor: 'green',
fontSize: '12px'
}
return (
<div style={style}>Hello, GodDaeHee!</div>
);
}
or
function App() {
return (
<div style={{color:"red"}}>Hello, GodDaeHee!</div>
);
}- class 대신 className
function App() {
return (
<div className='text-hello'>Hello, GodDaeHee!</div>
);
}출처👇
