JSX
리액트는 JSX문법이라는 JavaScript 확장 문법을 사용한다.
왜 이런 문법을 사용하게 된걸까?
요즘 만들어지는 웹 사이트는 단순히 데이터를 보여주는것을 넘어
유저와 많은 상호작용이 일어나는 웹사이트가 많다.
많은 상호작용을 하게되다보니 자연스럽게 많은 기능의 관리가 필요했고
이를 DOM을 이용해 관리하기에는 어려움을 겪게 되었다.
이런 DOM관리를 최소화하고 기능개발에만 집중할 수 있는 방법을
고민하게 되었고 그렇게 탄생한 것이 리액트, 뷰, 엥글러이다.
리엑트는 컴포넌트라는 개념에 집중된 라이브러리이다.
컴포넌트란, 하나의 의미를 가진 독립적인 단위 모듈로
쉽게 말해 나만의 HTML 태그라고 생각하면 된다.
예를들어 트위터의 한 트윗을 표시하기위해서는 아래와 같은
HTML 태그를 작성해야 한다.
<div class="tweet">
<span class="userId">@walli</span>
<div class="contants">hello, my name is walli :)</div>
<div class="time">43 seconds ago</div>
</div>하지만 이런 태그를 아래와 같이 쓸수 있다면 어떨까?
<Tweet userId="walli" time="43">
hello, my name is walli :)
</Tweet>원래 <Tweet>이라는 태그는 없지만 이렇게 만들어 사용할 수 있다면
직관성도 높고, 재사용하기에도 용이할 것이다.
이런 컴포넌트들을 만들기 위해 JSX문법을 사용하는 것이다.
물론 JSX없이도 리액트를 사용할수는 있다.
공식 문서에 따르면 빌드 환경에서 컴파일 설정을 하고싶지 않을 때에는 JSX없이 리액트를 사용하는것이 편하다고 한다.
JSX는 React.createElemenet(component, props, ...children)를
호출하기 위한 문법적 설탕(Syntactic Sugar)이다.
그래서 JSX로 할수 있는 모든것은 JavaScript로도 할 수 있다.
이제 JSX를 사용하는 방법을 알아보자.
가장 기본적인 JSX문법은 이렇다.
const element = <h1>Hello, world!</h1>;위 태그는 문자열도, HTML도 아니다.
이런 문법을 JSX 문법이라고 한다.
이렇게 작성한 JSX는 리액트 엘리먼트를 생성한다.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);위 예제는 name이라는 변수를 선언한 후 중괄호로 감싸
JSX 안에 사용하였다.
JSX의 중괄호 안에는 JavaScript 표현식을 넣을 수 있다.
(2 + 2, user.firstName, formatName(user))
JSX도 표현식이기 때문에 컴파일이 끝나면
JavaScript 객체로 인식하게 된다.
그렇기 때문에 함수 내에서 조건문, 반복문 사용이 가능하다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}엘리먼트 렌더링
위에서 설명한 React.createElemenet()이
Babel에서 호출로 컴파일했을 때 아래와 같은 객체를 생성한다.
const element = {
type: 'h1',
props: {
children: 'Hello, world!'
}
};이러한 객체를 리액트 엘리먼트라고 하며
리액트 엘리먼트는 리액트의 가장 작은 단위이다.
리액트는 이런 객체를 읽은 후 DOM을 구성하고
최신으로 유지하는데 이러한 객체를 사용한다.
DOM 엘리먼트와는 달리 리액트 엘리먼트는 일반 객체이며
리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 업데이트 한다.
여기서 컴포넌트와 엘리먼트가 햇갈릴 수 있는데
엘리먼트는 컴포넌트의 구성 요소이다.
DOM에 엘리먼트를 렌더링 하는 방법에 대해 알아보자
<div id="root"></div>HTML파일에 이런 태그가 작성되어있다고 하자
이 안에 들어가는 모든 엘리먼트를 리액트 DOM에서 관리하기 때문에
이것을 루트 DOM 노드라고 부른다.
리액트 앱을 만들면 HTML 문서 안에 이런 루트 DOM 노드가 들어가있다.
리액트 엘리먼트를 이 루트 DOM 노드에 렌더링 하려면
아래와 같이 작성하면 된다.
ReactDOM.render(element, document.getElementById('root'))여기서 element에는 컴포넌트를 넣어도 된다.
마지막으로, 리액트API의 사용을 위한 방법을 알아보자.
리액트API를 사용하기 위해서는 import/export 구문을 작성 해야된다.
npm에서 ES6를 사용하는 경우 import 구문은
import React from 'react'를 작성하고,
ES5를 사용하는 경우
let React = require('react')를 사용하면 된다.
export 구문은 export default {function}를 작성하면 된다.
ES6를 사용한 import/export 예제
import React from 'react'
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome