[React] 리액트의 개요

1. 정의

리액트(React)는 자바스크립트 기반 프론트엔드 라이브러리로 메타(페이스북의 모회사)에서 개발된 오픈소스이다.

 

 

 

2. 리액트의 특징

리액트는 다음과 같은 특징을 가진다.

• 함수형 또는 클래스형 프로그래밍으로 다양한 방식을 통해 웹 페이지를 구현할 수 있다.
• 컴포넌트 기능으로 다양한 UI를 구성하는 과정에서 코드를 재활용하여 생산성의 이점을 가질 수 있다.
• 유저에게 상태값을 전달하거나 상호작용하는 과정에서의 구현과정을 보다 편리하게 할 수 있다.

// React에서 render 함수를 통한 표현
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

 

 

 

3. Virtual DOM

가상 DOM(VDOM, Virtual DOM)은 UI의 가상적인 표현을 메모리에 저장해 라이브러리로 실제 DOM과 동기화(Reconciliation) 하는 프로그래밍적 개념이다.

리액트의 경우 UI를 나타내는 객체에서 엘리먼트 렌더링(React Elements)과 연관되어 있는데 여타 브라우저 DOM과 달리 일반 객체(Plain Object)를 통해 쉽게 생성할 수 있는 이점을 가진다.

// DOM에 엘리먼트 렌더링
<div id="root"></div>


// 렌더링 된 엘리먼트 업테이트
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

 

 

 

4. JSX

JavaScript Extension의 약자로 자바스크립트를 확장한 HTML을 표현할 때의 문법이다.

리액트는 렌더링 로직이 UI가 표현되는 과정(로직)과 연결되는 본질적인 구조를 가지는데 JSX를 통한 엘리먼트를 생성하는 과정에서 보다 개발 시점의 가독성을 줄 수 있다.

const name = 'Josh Perez'; // 변수 선언 및 초기화
const element = <h1>Hello, {name}</h1>; // 중괄호로 자바스크립트 표현식을 통한 변수 호출

ReactDOM.render(
  element,
  document.getElementById('root')
);