[리액트 교과서] React, JSX

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다.

 

 

지루한 컴포넌트인지 엘리먼트인지... 빨리 뛰어넘어버리지 않으면 JSX도 못본 채 리액트를 버려버릴거같았다..

전 단계로 리액트를 구성(?)한다고 했을때 특히나 가독성이 좋지않아 뭐가 뭔지 이해하기 힘들었다.

이런 문제를 JSX로 해결한다고 한다.

 

JSX

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장이다.

특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다.

React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다.

 

<div>
	<HelloWorld/>
    <br>
    <a href="http://webapplog.com">Great JS Resources</a>
</div>

JSX

React.createElement(
	"div",
    null,
    React.createElement(HelloWorld, null),
    React.createElement("br", null),
    React.createElement(
    	"a",
        { href: "http://webapplog.com" },
        "Great JS Resources"
    )
)

Javascript

 

"use strict",

React.createElement(
	"div",
    null,
    " ",
    React.createElement(HelloWorld, null),
    " ",
    React.createElement("br", null),
    " ",
    React.createElement(
    	"a",
        { href: "http://webapplog.com" },
        "Great JS Resources"
    ),
    " "
)

Babel 버전 6을 사용해서 자바스크립트로 변환

 

위 예시를 보면 확실히 코드가 보기 편하고 줄어든걸 확인할 수 있다.

 

기존 방식은 HTML 따로 javascript 따로 css 따로 모든 파일이 따로 놀았다면

JSX는 UI와 자바스크립트 로직에 대한 설명을 한 곳으로 모았다.

코드가 HTML처럼 보이므로 읽고 쓰기가 간편하다. 

JSX는 여러 가지 도구를 사용해서 표준 자바스크립트로 컴파일 할 수 있다.

 

 

출처

리액트 교과서 - 아자트 마르단 지음, 곽현철 옮김