[개념정리] React_JSX

React를 처음 배우겠다고 Creat React App으로 첫 페이지 띄우고 코드를 보면 궁금해지는게 있다.

js 파일에서 html 코드들을 변수로 만들어서 넣어주는 것 같은데 자바스크립트 코드 안에 html태그라니..

언뜻 보면 html,css 태그 같지만 아니다. JSX 라고 부르는 것.

 

JSX= Javascript XML

 

인데 문법을 살펴보자.

 

 

JSX 문법 :

const heading = <h1 className="site-heading">Hello, React</h1>

 

No JSX 문법 :

const heading = React.createElement('h1', { className: 'site-heading' }, 'Hello, React!')

즉 React는 Javascript에서 createElement 함수로 태그를 만드는 것을 상단 JSX 코드 처럼 쓸 수 있도록 만들어두었다.

아주 좋다.

 

 

JSX 유의할 점

• css class들을 추가할 때는 class 대신 상단의 코드와 같이 className으로 지정한다. Javascript에서 class를 별도 개념으로 사용하기 때문에 혼용할 수 없다.
• 변수와 함수를 선언할 때는 camelCase를 사용한다. ex)onclick -> X, onClick -> O
• 태그 하나로 표기 되는 객체는 태그 내부에서 꼭 닫아주어야 한다. ex) <img />
• JSX 코드 내부에 중괄호 '{}'를 사용하여 Javascript표현을 삽입할 수 있다. 예를 들어 속성, 변수, 함수를 괄호내부 넣을 수있는데 아래 코드와 같이 표시한다. 

const name = 'Anna'
const heading = <h1>Hello, {name}</h1>