React - JSX

1. JSX란?

리액트와 마찬가지로 자바스크립트 확장 구문으로 react에서 화면을 구성할때 사용을 하고 있다.
또한 JSX를 이용하면 Javascript나 리액트가 제공하는 API로 개발하면 코드양이 많아질 수 있는 것을 보완하여 개발자가 쉽게 코드를 기술 할 수 있도록 한다.

2. JSX 특징

JSX특징으로는

1. 태그는 무조건 닫혀야한다.

여기에서 주의할 점으로는 JSX를 사용할 때

<p>JSX 특징</p>             --------> X
<p>JSX 특징</p> 

이렇게 사용하면 안되고,

1)
<>
<p>JSX 특징</p>               -------> o
<p>JSX 특징</p>              
</>

2)
<div>
  <p>JSX 특징</p>
  <p>JSX 특징</p> 
  </div>

이런식으로 하나로 감싸서 사용을 해야한다. 빈태그로도 묶는거 가능한다.

2. 카멜케이스 표기법을 사용한다.

CSS 속성은 스네이크표기법을 사용하였지만 react에서는 카멜케이스 표기법을 사용한다.
예로 들면
background-color : X
backgroundColor : O

const style = {
    backgroundColor : 'deepskyblue',
    fontSize : 30,
    color : 'white',
    padding : '1em'
  }

위의 코드를 예시로 보면 이런 방식으로 사용을 한다.