---

React

React는 자바스크립트 라이브러리로서 사용자 인터페이스(UI)를 만들기 위해 사용된다.

React는 SPA(Single Page Application)방식의 자바스크립트 라이브러리이다.

SPA방식의 가장 큰 특징은 하나의 웹 페이지에서 특정 영역의 View만 다시 그려지는 것이다.

즉 React는 페이지를 다시 로드하지 않고 데이터를 변경하여 웹 애플리케이션의 퍼포먼스를 최적화할 수 있는 라이브러리이다.

Component

React는 Component 기반의 라이브러리이다.

여기서 Component는 웹 페이지에서 화면을 구성하는 하나의 단위를 일컫는다.

이러한 Component는 여러 페이지에 걸처 여러번 사용할 수 있어 재사용성 측면에서 큰 장점을 가지고 있다.

---

JSX

HTML문법을 JavaScript 코드 내부에 사용한 것

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다.

JSX로 작성된 코드는 React 엘리먼트(element) 를 생성하며 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

즉 JSX를 통해 하나의 파일안에서 Javascript와 HTML을 동시에 작성할 수 있다.

const header = <h1>fruit is delicious</h1>;

JSX 문법

• 표현식

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>
);

• Attribute

중괄호를 이용하여 엘리먼트의 속성에 JavaScript 표현식을 사용할 수도 있다.

const imgURL = 'www.imageURL.com';
const element = <img src={imgURL} />;

또한 엘리먼트 속성에 표현식을 사용할 때 HTML 어트리뷰트 이름 대신 camelCase 규칙을 사용한다.

const onClickButton = () => {
  console.log('Clicked!!');
}

const element = <button onClick={onClickButton}>버튼<button/>;

• Object

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을 구성하며 또한 최신 상태를 유지한다.

---

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초