본래 리액트에서 리액트 엘리먼트를 생성할 때 React 가 가지고 있는 createElement 메서드를 통해 생성해낸다.
color 라는 id 를 가졌으며 text 는 "빨강" 을 집어넣은 엘리먼트 h1 태그를 만들 때 아래와 같이 만들어낸다.
React.createElement("h1", {id: "color", 'data-type': "title"}, "빨강");
// <h1 data-reactroot id="color" data-type="title">빨강</h1>
createElement 로 엘리먼트를 만들 경우 <h1 data-reactroot id="color" data-type="title">빨강</h1> 처럼
data-reactroot 가 붙게 되는데 이는 리액트 컴포넌트의 루트 엘리먼트를 식별해주는 애트리뷰트이다.
여튼 이처럼 리액트에서 엘리먼트를 생성할 때 createElement 를 사용하곤 했는데
매번 엘리먼트를 생성할 때마다 React.createElement 를 입력하는 것도 번거로운 일.
이에 대신 사용할 수 있는 대안이 JSX ( JAVASCRIPT XML ) 이다.
JSX 는 JAVASCRIPT 의 확장으로 HTML 과 비슷한 구문을 사용해 리액트 엘리먼트를 정의할 수 있게 해주며
HTML 과 비슷한 구문으로 작성되기에 직관적이고 사용하기 편리하며 컴파일을 하기에 최적화 되고 빠르다는 장점이 있다.
그럼 JSX 를 사용할 때 팁 몇 가지를 살펴보자.
className
우리는 주로 엘리먼트에 id 와 class 를 주어 사용하곤 하는데
JAVASCRIPT 에서는 class 가 예약어이므로 class 대신 className 을 사용.
<h1 className="color"> 빨강 </h1>
내포된 컴포넌트
JSX 에서는 컴포넌트 안에 다른 컴포넌트 자식들을 추가할 수 있다.
<colorList>
<color />
<color />
<color />
</colorList>
Props 의 기본 값은 True
Props 에 아무런 값을 넘기지 않을 경우 기본 값은 true 로 넘어가게 된다.
// 두 표현은 동일한 표현
<TestComponent test />
<TestComponent test={true} />
스코프 내에 React import 존재
JSX 는 컴파일 될 때 React 가 가지고 있는 createElement 를 호출하는 코드로 컴파일 되기에
현 스코프 내에 React 를 반드시 impot 해줘야 한다.
import React from 'react'; // 필수
import TestComponent from './TestComponent';
function AddText() {
return <TestComponent val="hello" />;
}
스코프 내에 호출할 Component import 존재
위와 마찬가지로 호출할 컴포넌트가 현 스코프 내에 import 해줘야 한다.
import React from 'react';
import TestComponent from './TestComponent'; // 필수
function AddText() {
return <TestComponent val="hello" />;
}
추가로 설명을 덧붙여, 이러한 JSX 는 깔끔하고 읽기 쉽지만 브라우저는 JSX 를 해석할 수 없다.
대부분의 소프트웨어 언어는 소스 코드를 컴파일하는데 ES6, ES7 문법을 지원하지 않는 브라우저도 있을 뿐더러,
어떤 브라우저는 JSX 자체를 지원하지 않기도 한다.
우리는 우리가 작성한 JSX 문법의 코드를 브라우저가 해석할 수 있는 코드로 변환해 줄 수단이 필요한데
이는 바벨이라는 것이 해결해준다.
바벨이란?
2014년 9월에 최초 발표되었고 처음에는 6to5 라 불렸다.
ES6 문법을 지원안하는 브라우저가 많기에 이를 ES5 문법으로 변환해주기 때문.
그 후, ECMAScript 의 문법을 모두 지원하는 플랫폼 역할을 하는 것으로 재설정되어 발전되어졌다.
바벨을 사용하는 방법은 간단하다.
babel-standalone 트랜스파일러에 대한 링크를 HTML 에 import 해주면 된다.
그럼 바벨은 'text/babel' 인 script 태그 안의 모든 코드를 컴파일해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSX Babel</title>
</head>
<body>
<div id="root"></div>
// babel import
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
// babel 은 이 script 태그 안의 소스를 컴파일한다
<script type="text/babel">
</script>
</body>
</html>
이상이당 ㅎ.
'Coding Story > REACT' 카테고리의 다른 글
| [ React ] 리액트 Hooks(useState, useEffect) (0) | 2020.10.21 |
|---|---|
| [ React ] 리액트 라우터 React-Router (2) | 2020.10.21 |
| [ React ] 리액트 함수형 프로그래밍 (0) | 2020.10.21 |
| [ React ] 리액트 전개 연산자 ? (0) | 2020.10.21 |
| [ React ] 리액트 Map 과 데이터 랜더링 (0) | 2020.10.21 |
