01. JSX에 대하여

JSX (JaveScript XML) 는 리액트(React)로 프로젝트를 개발할때 사용하는 문법이다.

JavaScript에 XML을 추가 확장한 문법으로 공식적인 바닐라 자바스크립트는 아니지만 자바스크립트의 모든 기능이 포함되어있는 문법이다.

리액트(React)는 웹프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기위해 사용된다.

출처: 리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전) 22.01기준

HTML과 비슷해
렌더링 로직 ( 표현할 데이터를 받아오는 로직 ) 과 UI 로직(받아온 데이터를 UI로 만드는 로직)

Markup Language ( 간단히 문서나 데이터 구조를 표현하는 언어의 한가지이다)이므로 UI로직(받아온 데이터를 UI로 만드는 로직)을 시작적으로 이해하기 쉽게 표현을 할수있다.

작성하는방법은 자바스크립트 문법과 동일하게 작성하면된다

* JSX 문법규칙

1. 요소를 감싼다.

Component 에 여러요소가 있다면 반드시 부모요소로 감싸야하며, return을 기준으로
위로는 Javascript 문법을 아래는 HTML 태그를 작성하면 된다.

export default function Page() {

    return (
        <div>
            <title> Hello World!</title>
       </div>
    )
}

2. 자바스크립트 표현이 가능하다.

자바스크립트식은 중괄호 {}를 사용하여 JSX안에 쓸수있다.

<h1>{1+2}</h1>

//위의 예시는 다음과 같이 렌더링된다.

<h1>3</h1>