[ReactJS] - JSX란? (소개, 문법) - 기초

JSX 정의

-JSX는 JavaScript를 확장한 문법이다.

-UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다.

-JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있다.

-브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

JSX 문법

 const sentence = <h1>Hello, my name is</h1>;

위 코드는 가장 기본적인 JSX문법이다.

sentence라는 변수를 선언한 후 내부에 h1태그를 사용하였다.

코드를 보면 알수있듯이 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 쉽게 작성하여 가독성이 높고 사용이 편리하다

---

    const root = document.getElementById("root");
    const name = "Luka";
    const sentence = <h1>Hello, my name is "{name}"</h1>;

    ReactDOM.render(
        sentence,
        root
    );

위 코드는 name이라는 변수를 선언한 후 h1 태그 내부에 중괄호로 감싸 JSX 내부에 사용하였다.

결과는 아래 사진을 참고하자.

위 결과처럼 JSX의 중괄호 안에는 유효한 모든 자바스크립트 표현식을 넣을 수 있다.

---

다음은 JSX 문법의 주의사항 및 상세 사용법에 대해 알아보도록 하자.

https://luka-frontend.tistory.com/10

[ReactJS] - JSX 문법의 특징

 

 

 

 

Ref.

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리