리액트란?

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

선언형

• React는 데이터가 변경됨에 따라 적절한 컴포넌트만
  효율적으로 갱신하고 렌더링함

컴포넌트 기반

• 캡슐화된 컴포넌트
• 컴포넌트 로직은 JavaScript로 작성됨
• 다양한 형식의 데이터를 앱 안에서 손쉽게 전달 가능
• DOM과는 별개로 상태 관리 가능

JSX

• JavaScript를 확장한 문법
• JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적 도움
• 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수를 호출하고
  JavaScript 객체로 인식됨
• 어트리뷰트에 따옴표를 이용해 문자열 리터럴 정의 가능
• 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식 삽입 가능
• 태그가 비어있다면 /> 를 이용해 바로 닫아야 함
• 자식 포함 가능
• 주입 공격 방지

엘리먼트 렌더링

• 엘리먼트는 React 앱의 가장 작은 단위
• React 엘리먼트는 일반 객체이며 쉽게 생성 가능
• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트

DOM에 엘리먼트 렌더링

<div id="root"></div>

루트(root) DOM 노드

• 내부의 모든 엘리먼트를 React DOM에서 관리
• React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드를 가짐

React 엘리먼트를 루트 DOM 노드에 렌더링하려면
ReactDOM.render()로 전달하면 됨

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

렌더링 된 엘리먼트 업데이트

• React 엘리먼트는 불변객체
• 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음
• 지금까지 소개된 내용을 바탕으로 UI를 업데이트하는 유일한 방법은
  새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 방법

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

setInterval() 콜백을 이용해 초마다 ReactDOM.render() 호출

변경된 부분만 업데이트

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고
DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트

Reference

리액트 공식문서