JSX(Javascript Syntax eXtension)

• JavaScript를 확장한 문법
  - JSX가 하는 일은 React 요소(element)를 만드는 것
  - React 요소는 실제 DOM 요소가 아닌 Js 객체
  
• JSX는 HTML과 유사한 문법인 자바스크립트 코드
  - html처럼 간편하게 마크업 가능
  - {}를 이용하여 비즈니스 로직을 작성할 수 있다.
• JSX도 표현식
  - if 구문 및 for loop 안에 사용 가능하고, 변수에 할당 및 인자로 받아들이고 함수로 반환 가능
• 다수의 태그를 리턴할 수 없다. (형제노드 사용불가)
  - 한 가지 태그로 감싸줘야한다.
  - 단순히 묶어줄때는 <React.Fragment> 또는 <> 태그를 사용

HTML과 차이점

• JSX는 HTML보다 JS에 가깝기 떄문에 React DOM은 HTML attribute 대신 camelCase 프로퍼티 명명규칙을 따름
  - class attribute => className
  - onclick => onClick

const element = 
      <button className="foo" onClick="clickHandler">
        click
      </button>;

왜 JSX를 써야 할까..?

JSX를 사용하지 않아도 React App을 구성하는데 아무런 문제가 되지 않는다.
React.createElement로 요소를 생성하고 조립하면 된다.

// React.createElement('element', attr, child)

const containerEl = React.createElement(
  'div',
  {
  	className: 'container'
  },
  React.createElement(
    'hello',
    {
      lang: 'en'
    },
    React.createElement(
      'abbr',
      {
        title: 'Javascript'
      },
      'js'
    }
    )
  )
)

JSX에 비해 직관적이지 않고 읽기가 어렵다..😥

// JSX
const containerEl = (
  <div className="container">
    <h1 lang="en">
      <abbr title="Javscript">js</abbr>
    </h1>
  </div>
  )

JSX는 babel을 통해 컴파일 과정을 거쳐 React.createElement 형식으로 변환이 된다.
그러므로 JSX를 사용하여 보다 쉽고 간편하게 작성하자!

주의사항

1. 속성 이름은 camelCase 표기법으로
   • 접근성 속성(WAI-ARIA)는 HTML 표준 속성과 동일한 hypen-case 표기법 사용
2. 컨텐츠가 없는 요소는 항상 /> 닫아야 한다.
   • JSX는 XML 문법에 따라 컨텐츠 없는 빈요소는 반드시 닫아줘야한다.
3. 기본적으로 루트 요소는 하나만
4. Js 식과 함수는 값을 반환하기에 JSX 코드에서 인라인으로 사용할 수 있지만 문은 값을 반환하지 않으므로 인라인으로 사용하지 않고 변수나 반환값이 있는 함수로 지정해서 사용
   • 반복문을 forEach가 아닌 map을 사용하는 이유!!(return 값이 있기에)