React
는 자바스크립트 라이브러리로서 사용자 인터페이스(UI)를 만들기 위해 사용된다.
React
는 SPA(Single Page Application)
방식의 자바스크립트 라이브러리이다.
SPA
방식의 가장 큰 특징은 하나의 웹 페이지에서 특정 영역의 View만 다시 그려지는 것이다.
즉 React
는 페이지를 다시 로드하지 않고 데이터를 변경하여 웹 애플리케이션의 퍼포먼스를 최적화할 수 있는 라이브러리이다.
React
는 Component
기반의 라이브러리이다.
여기서 Component
는 웹 페이지에서 화면을 구성하는 하나의 단위를 일컫는다.
이러한 Component
는 여러 페이지에 걸처 여러번 사용할 수 있어 재사용성 측면에서 큰 장점을 가지고 있다.
HTML
문법을JavaScript
코드 내부에 사용한 것
JSX(JavaScript XML)
는 Javascript
에 XML
을 추가한 확장 문법이다.
JSX
로 작성된 코드는 React
엘리먼트(element)
를 생성하며 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
즉 JSX
를 통해 하나의 파일안에서 Javascript
와 HTML
을 동시에 작성할 수 있다.
const header = <h1>fruit is delicious</h1>;
JSX
의 중괼호({ })
안에는 JavaScript에서 유효한 모든 표현식을 넣어 사용할 수 있다.
즉 단순히 변수의 값뿐만 아니라 함수의 실행결과 또한 React
엘리먼트에 사용될 수 있다.
const fruit = 'apple';
const element = <h1>Delicious, {fruit}</h1>; // Delicious, apple
const fruit = {
name: 'apple',
price: '$100'
};
function fruitInfo(fruit) {
return fruit.name + '의 가격은 ' + fruit.price;
}
const element = (
<h1>
{fruitInfo(fruit)} // apple의 가격은 $100
</h1>
);
중괄호를 이용하여 엘리먼트의 속성에 JavaScript
표현식을 사용할 수도 있다.
const imgURL = 'www.imageURL.com';
const element = <img src={imgURL} />;
또한 엘리먼트 속성에 표현식을 사용할 때 HTML
어트리뷰트 이름 대신 camelCase 규칙을 사용한다.
const onClickButton = () => {
console.log('Clicked!!');
}
const element = <button onClick={onClickButton}>버튼<button/>;
JSX
코드는 자바스크립트의 확장 문법으로 브라우저가 바로 실행할 수 있는 코드가 아니다.
그래서 Babel
이라는 자바스크립트 컴파일러를 사용하여 브라우저가 이해할 수 있도록 아래와 같이 코드를 변환해 준다.
const element = (
<div className="fruit">
Apple is Delicious
</div>
);
const element = React.createElement(
'div',
{className: 'fruit'},
'Apple is Delicious'
);
이러한 과정을 거친 뒤 다음과 같은 객체를 생성한다.
const element = {
type: 'div',
props: {
className: 'fruit',
children: 'Apple is Delicious'
}
};
이렇게 생성된 객체가 포스팅 초반에 언급한 React
엘리먼트이다.
React
는 이 객체를 토대로 DOM을 구성하며 또한 최신 상태를 유지한다.