기초개념

React는 사용자 인터페이스 라이브러리다. 컴포넌트라는 작고 독립적인 코드 조각으로 애플리케이션을 구성한다. 그리고 단방향 데이터 흐름을 따르기 때문에 예측 가능한 흐름을 유지한다.

Virtual DOM

가상의 DOM이다. 이 개념은 상태 변경에 집중했다 볼 수 있다. DOM의 변경사항들을 가상에 모아두었다가 한 번에 바꾼다. 이렇게 되면 React는 DOM 조작을 최소화하고 성능을 향상시켜준다. 그렇다 해도 빠른 것은 아니다.

JSX 문법

React에서 UI를 구성하는 요소를 선언할 때 사용한다. 기본적으로 Javascript로 컴파일되어 실행되는 문법이다.

예시

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

첫 번째 줄은 React 라이브러리에서 React 모듈을 불러와 사용하겠다는 것이다. function HelloWorld()는 함수형 컴포넌트를 정의한 것이다. 여기서 JSX 형식으로 작성된 HTML 코드를 반환한다. 마지막 줄은 이 파일 내에서 HelloWorld 컴포넌트를 내보내겠다는 것을 의미한다. 이 컴포넌트를 사용하려면 다른 컴포넌트에서 import하여 사용할 수 있다.