리액트(React) JSX

리액트(React) JSX

먼저 리액트 공식홈페이지에서 JSX를 어떻게 소개하고있는지 살펴봅시다.

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

위의 희한한 태그 문법은 문자열도, HTML도 아닙니다.

JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

(이후 생략...)

리액트로 기술한 소스 코드를 보면, HTML과 비슷한 부분이 있지만 뭔가 조금 다른 부분도 있다는 걸 확인하셨을 겁니다. JSX는 리액트와 마찬가지로 페이스북에서 개발한 확장 구문입니다(http://facebook.github.io/jsx/).

우리는 리액트로 웹 앱을 작성합니다. 그렇기 때문에 HTML을 표현하려면 DOM을 구축해야 합니다. 그러나 이를 순수 JavaScript로 작성하거나, 리액트에서 제공하는 표준 API으로만 작성하면 코드 양이 너무 많아질 수 있어 작성하기에 번거로울 수 있습니다. 이를 해결하기 위해 JavaScript로 개발한 확장 구문인 JSX가 나왔으며, JSX로 개발자가 쉽게 코드를 작성할 수 있게 되었습니다.

JSX는 HTML과 비슷하기에 UI를 템플릿화 하였다고 얘기할 수 있습니다. 기존 JavaScript로 리액트 앱을 구축하기에 불편함이 있어 JSX가 나왔다고 얘기하였습니다. 마치 JSX 사용이 필수일 것 같지만 필수는 아닙니다. 하지만 JSX를 사용한다면 다음과 같은 장점이 있습니다. Velopert님께서 작성하신 장점을 가져왔습니다.

•HTML과 비슷하기 때문에, HTML에 익숙하다면 JSX로 더 쉽고 빠르게 UI 템플릿을 작성할 수 있다.

•JSX를 JavaScript로 컴파일하면서 코드가 최적화가 되기 때문에 보다 더 빠르게 실행된다.

•Type-safe*하며 컴파일링 과정에서 에러를 감지할 수 있다.

    *Type-safe : 어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것, 즉 예측 불가능한 결과를 나타내지 않는 것. jerrypop님의 블로그 참고.

리액트 표준 API와 JSX로 작성한 컴포넌트 비교

리액트 표준 API로 작성한 Hello.js

import React from 'react';

const Hello = () => React.createElement(

'p',

{ className : 'hello' },

'Hello, world!'

);

export default Hello;

JSX로 작성한 Hello.js

import React from 'react';

const Hello = () => {

return (

<p className="hello">

Hello, world!

</p>

);

};

export default Hello;

실행을 위해 App.js에 Hello Component를 추가합니다. 먼저 리액트 표준 API로 작성한 컴포넌트를 추가하여 테스트했다면, JSX로 컴포넌트를 작성한 후 App.js에서는 따로 컴포넌트 수정을 안 해도 됩니다.

App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Hello from './basic/Hello';

const App = () => {

return(

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

<p className="App-link">

</p>

<Hello />

</header>

</div>

);

}

export default App;

실행하면 다음과 같이 나옵니다.

다음 코드

확장자 .js, .jsx

camelCase 

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019

2. Velopert. ⌜[React.JS] 강좌 3편 JSX⌟. 사이트 : https://velopert.com/867 

3. React. ⌜JSX 소개⌟. 사이트 : https://ko.reactjs.org/docs/introducing-jsx.html

4. jerrypop. ⌜type-safe란?⌟. 사이트 : https://blog.naver.com/jerrypop/40117130140