JSX

1. 멋쟁이 JSX와 Babel

2. JSX 문법 파헤치기

3. Style Basic

4. 실습

JSX : JS과 XML의 합성어

XML를 사용하는 자바스크립트의 확장 문법

xml를 쉽게 말하자면 html과 같은 마크업 언어, 표시하기 위한 언어

xml은 html과 굉장히 유사하지만 다르다

html를 데이터를 화면에 보여주기 위함을 목적이라고 한다면

xml은 데이터를 저장하고 전달하는 것이 주목적이다

xml은 각 데이터가 어떠한 데이터 인지 설명하기 위해 태그를 직접 정의할 수 있다

HTML

Hyper Text Markup Language

<div>
	<h1>Hello,World</h1>
    <Button />
</div>

XML

EXtensionable Markup Language

<it것저것>
<birthday>991206</birthday>
<univ>SCNU</univ>
</it것저것>

JSX = JS + XML

Const App = () => {
return(
<div>
<h1> Hello World!</h1>
<Button />
</div>
);
};

js에서 xml과 같은 문법을 사용할 수 있도록 확장된 언어이다

위에는 자바스크립트인데 return안에 html 형태가 들어가 있다

정확하게는 html이 아니라 xml이 가능한 것이고 이게 JSX 문법이다

jsx는 js에 기반하고 있지만 js와 완전히 같지는 않는다

결국 실행하기 위해서는 자바스크립트로 변환해줘야 한다

→ 이것을 바벨이 한다

리액트는 선언적 프로그래밍을 한다

jsx를 이용한 코드는 hello,world라는 내용의 h1 태그를 생성해 라는 결과 선언적이라면

js는 명령형 프로그래밍 언어로 h1 태그를 어떻게 만들지 reactElement를 생성하고 걔는 h1 태그이고 어떻게 만들 것인지 하나하나 명령하며 코딩을 해야함

이것저것