ReactDom.render()

ReactDom.render(
  <App/>,
  document.querySelector("#root")
)
// 상기 코드는 id가 root인 html 태그의 자식으로 <App/>추가 한다라는 의미이다.

JSX 문법

JSX는 React element를 생성하는 확장된 Javascript 문법으로 HTML 이나 문자열이 아니다. babel을 통한 컴파일 과정을 거처 Javascript로 사용된다.
태그형태는 React.createElement('div',null)의 형태로 변환 된다고 생각할 수 있다.
1. 최상위 요소는 하나의 부모 태그 또는 React.Fragment로 감싼다.
2. 최상위 요소를 리턴할때는 ()로 감싼다.
3. 자바스크립트 표현식 사용시, {표현식}을 이용한다.
4. if문은 사용이 불가하며, 삼항연산자혹은 단축평가논리계산법(&&, ||)을 사용한다.
5. class사용시 className을 사용해야 한다. (class는 예약어)
6. style을 통해 인라인 스타일링이 가능하다.
7. 태그는 항상 닫는태그를 같이 사용해야한다.

꼭 JSX 문법을 사용해야하나?

컴포넌트를 생성할때 JSX 문법을 사용했는데 이를 꼭 사용할 필요는없지만 사용하지 않으면 코드의 가독성이나, 코드작성이 비효율적일 수 있다.
React에서 JSX를 사용했을때와 그렇지 않았을때를 비교하면 다음 코드와 같은 차이가 있다.

//jsx 사용
ReactDOM.render(
  <> // React.Fragment, 이 HTML형태의 코드는 babel을 통해 읽기가 가능해진다.
    <div>
      <h1>Fruit</h1>
      <ul>
        <li>Banana</li>
        <li>Apple</li>
      </ul>
    </div>
  </>,
  document.querySelector("#root")
)

//jsx 미사용
// jsx 사용코드가 바벨을 통하면 아래와같이 된다고도 볼수 있다.
ReactDOM.render(
  React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "Fruit")
      React.createElement(
        "ul",
        null
        React.createElement("li", null, "Banana")
        React.createElement("li", null, "Apple")
      )
    )
  )
)