React 란?

프레임워크(FrameWork) : 공장처럼 어느 정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진 것.
라이브러리(Library) : 도구 처럼 기능을 불러와서 사용하는 것.

React는 페이스북에서 개발한 JavaScript의 라이브러리로 다음과 같은 특징을 가지고 있다.

• 서버와의 데이터 통신과는 별개로 DOM객체를 직접적으로 조작해야하는 기존 웹 화면 개발 방식과 달리, React는 DOM 객체를 직접적으로 조작하지 않는다.
• 데이터가 변화할 때 변경사항이 적용된 가상돔(VirtualDOM)을 만들어서 실제 DOM과 VirtualDOM의 차이점을 비교하고 차이점이 있으면 변경된 부분을 실제 DOM에 적용한다.
  -React는 데이터 흐름이 한 방향으로만 흐른다. 즉, 데이터를 아래로 전달하기만 하고 자식이 부모의 데이터를 바꿀 수 없기 때문에 state를 사용하여 조작한다.
• JavaScript 지식이 부족할 경우에는 사용이 힘들기 때문에 어느 정도의 JavaScript에 대한 지식이 있어야 한다.

JSX

React에서 사용되는 JSX 표현에 대해 정리를 하면 JSX는 JavaScript, html도 아닌 JSX라고 불리는 JavaScript의 확장버전일 뿐이다.

JSX element

HTML 문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX이다. JSX는 변수에 저장할 수도 있고, 함수를 호출할 때 인자로 넘길수도 있다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, React</h1>
      </div>
    );
  }
}

export default App;

JSX attribute

HTML 요소의 속성(attribute)을 주고 싶을 때는 쌍따옴표("")로 감싸서 사용한다. JSX에서는 class를 className으로 바꿔서 사용해야 한다.

Rendering

HTML 요소(element) 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링 이라고 말한다.