🛠 JSX ?

리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법
html과는 다르다.

얼핏보기에는 html같이 생겼지만, 사실은 자바스크립트이다.
바벨이라는 도구를 통해서 변환된다.

🤔 BABEL?

:입출력 모두 자바스크립트 코드인 컴파일러.
JSX,타입스크립트,코드 압축,제안 단계에 있는 문법들을 사용할 수 있다.

JSX 문법으로 작성

babeljs.io에 접속하여
BABEL이 어떻게 동작하는지 확인해보자,

위와같이 JSX 형식으로 작성하였고,

바벨이 변환

바벨이 아래와 같이
React.createElement 함수를 사용하는 방식으로 변환했다.

바벨이 없다면 코드를 작성하는데 오래걸리고,
가독성도 매우 떨어질 것이다.

그러나 pure 자바스크립트를 다룰 순 없고,
몇가지 규칙을 준수해야한다.

JSX 규칙

1. 태그는 꼭 닫혀있어야한다.

1. <div>  //x
2. <div></div> //o
3. <input/> //o 셀프클로징

2. 하나의 태그로 감싸야한다.

//1. 사용 불가

<div>hi</div>
<div>bye</div>

//2. 사용 가능

<div>
  <div>hi</div>
  <div>bye</div>    
</div>

//3. 사용 가능 (Fragment Tag)
<>
<div>안녕하세요</div>
</>

3.자바스크립트 코드는 중괄호{}로 감싸야한다.

function App() {
  const name = 'react';

  return (
    <>
      <div>{name}</div>
    </>
  );
}   

위 코드는 react를 화면에 렌더링 한다.
그러나, 중괄호로 감싸지않으면 name을 화면에 렌더링 한다.

4. className

jsx 는 class가 아닌 , className으로 클래스를 선언해야한다.
class라고 써도 작동하지만, 콘솔에서 오류를 띄운다.

5. JSX 내부의 스타일들은 객체로 사용해야한다.

const style = {
 background: 'grey' 
}

return (
	<div style={style}>
  	  <div className='my-style'>
       	    something
	  </div>
	</div>
)

6. 주석

중괄호로 감싸서 주석을 사용해야한다.

{/*중괄호로 감싸야한다.*/}

return (

  <>
  {/*중괄호로 감싸야한다.*/}
	<input
  		//이렇게도 가능하다.
    	>
  </>
)

몇가지 위에 나열된 규칙을 반드시 숙지해야 한다.