우리는 JS(자바스크립트)가 HTML로 구성한 웹의 동작을 구현할 수 있다고 알고 있다.
그렇다면 JSX는 무엇일까?

1. JSX란

: 아래 변수를 한번 보자

const ash = <div>안상혁</div>;

• 우리가 흔히 알고 있는 자바스크립트 문법의 HTML태그가 함께 공존하고 있다.
  그렇다. JSX란 JavaScript 그 내부에 HTML태그를 직접 사용할 수 있게 한 확장버전이라 할 수 있다.
  더 쉽게 말하면 JavaScript 내부에 HTML을 써둔 것을 JSX라고 한다
• JSX는 JS가 아니기 때문에 웹 브라우저가 해석할 수 없다.(에러가 난다)
  따라서 이것을 컴파일 하는 과정이 필요하다.
  (Babel이 컴파일 한다)

2. JSX 컴파일

: JSX로 작성한 문법이 어떻게 컴파일 되는지 알아보자.

<div className="sidebar" />

• 위의 내용은 아래와 같이 컴파일 된다.

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

• DOM으로 아래처럼 길게 작성해야 하는 것을 위처럼 한줄에 해결할 수 있다.

3. JSX 작성

: 태그에 속성을 주고 싶을때 JSX에서는 몇가지 지켜야할 규칙이 있다.

1) 속성 넣기

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

• 원래의 HTML 속성과 이름이 차이가 있을 수 있으므로 링크 공식 문서를 활용하자.
  (예를 들면 class를 className으로 사용해야한다)
• Self-Closing-Tag를 사용하자.( <div /> 처럼 닫는 태그 없이 스스로 닫아준다 )

2) 2개 이상의 중첩된 요소

: () 괄호로 감싸 주어야 한다.

const good = (
<div>
    <p>hi</p>
</div>
);

3) 한개의 태그로 시작

: 처음 시작하는 태그는 하나의 태그로 감싸주어야한다.

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

• 예시에서 <div>로 감싸 준것 처럼 감싸준다.

3. 데이터 바인딩 하기

: 리액트를 쓰는 주된 이유일 것이다. 데이터 바인딩이 아주 쉬워진다.

function App () {
  return (
    <div>
      <h1>{ 여기에 변수, 함수를 넣어 }</h1>
    </div>
  )
}
      

• {} 컬리 브라켓 안에 그냥 넣으면 된다.

import sanghyuk from './ash.jpg';

function App () {
  return (
    <div>
      <img src={sanghyuk}</h1>
    </div>
  )
}

• import로 받아온 값도 바인딩 할 수 있다.(src, href 등 import 받아온 값)

let ash = '안상혁'
function App () {
  return (
    <div>
      <div className={안상혁}</div>
    </div>
  )
}

• 변수로 받아온 값도 넣을 수 있다. (받아와서 클래스명, id 등등 에도 넣을 수 있다)