JSX 란?

JSX

JavaScript + XML/HTML 이 결합된 구조이다.

 

JSX 코드 예시

const element = <h1> Hello, world!</h1>;

 

JSX의 역할

내부적으로 XML/HTML 코드를 JavaScript로 변환한다. → JSX코드로 작성해도 결과적으로는 JavaScript 코드가 나오게 된다.

JSX → JavaScript로 변환하는 함수가 바로 React.createElement 함수이다!

React.createElement(
    type,
    [props],
    [...children]
)

 

JSX를 사용한 코드

class Hello extends React.Component {
	render() {
    	return <div>Hello {this.props.toWhat}</div>;
    }
}

ReactDOM.render(
	<Hello towhat="World" />
    document.getElementById('root')
);

 

JSX를 사용하지 않고 순수 자바스크립트로만 이루어진 코드

class Hello extends React.Component {
	render() {
    	return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
	React.createElement(Hello, {toWhat: 'World'}, null),
    document.getElementById('root')
);

 

JSX를 사용하지 않더라도 리액트의 createElement 함수를 사용해야한다. 
리액트에서 JSX를 사용하는 것이 필수는 아니지만, 사용하게되면 사용성과 가독성이 매우 올라간다!

 

JSX의 장점

1. 간결한 코드, 가독성, 유지보수 쉬움(버그를 발견하기 쉬움!)

//JSX 사용함
<div>Hello, {name}</div>

//JSX 사용안함
React.createElement('div', null, `Hello, ${name}`);

2. Injection Attacks 방어
보안성 ↑

 

JSX 사용법

function formatName(user) {
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName : 'Pig',
    lastName: 'Wang'
};

const element = (
	<h1>
    	Hello, {formatUser(user)}
    </h1>
);

ReactDOM.render(
	element,
    document.getElementById('root')
);

Html 코드 안의 중괄호({ }) 안에 자바스크립트 코드를 넣을 수 있다. (자바스크립트 변수, 자바스크립트 함수 사용 가능)

//Book.jsx
import React from "react";

function Book(props) {
	return (
            <div>
                <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
                <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
            </div>
    );
}

export default Book;


//Library.jsx
import React from "react";
import Book from "./Book";

function Library(props) {
	return (
            <div>
                <Book name="처음 만난 파이썬" numOfPage={300} />
                <Book name="처음 만난 AWS" numOfPage={400} />
                <Book name="처음 만난 리액트" numOfPage={500} />
            </div>
        );
}

export default Library;

//index.js
import React from "react";
import ReactDOM from "react-dom";

import Library from "./folder/Library";

ReactDOM.render(
    <React.StrictMode>
    	<Library />
    </React.StrictMode>
    document.getElementById('root')
);

 

cf) jsx를 사용하지 않았을 경우

import React from "react";

function Book(props) {
	return React.createElement(
    	'div'
        null,
        [
        	React.createElement(
            	'h1',
                null,
                `이 책의 이름은 ${props.name}입니다.`
            ),
            React.createElement(
            	'h2',
                null,
                `이 책은 총 ${props.numOfPage}로 이뤄져 있습니다.`
            
            )
        ]
    )
}

export default Book;

코드의 양도 많고 가독성도 떨어진다..

React를 사용할때는 jsx는 필수이다!