React 기초

1. React, Vue, Angular

• React: user interface 만들기 위한 js library (가장 많이 사용)
• Vue: library와 framework의 중간
• Angular: cross-platforms, full-framework 지향
  • cross-platforms: 한 코드로 모든 플랫폼에서 실행 가능
• React의 Virtual DOM : DOM을 직접 제어하지 않으면 가상의 돔트리를 사용해 이전상태와 이후상태 비교하여 바뀐 부분 찾아내 자동으로 바꾸기 가능
• CSR(Client Side Rendering): js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음
  -> SSR(Server Side Rendering; js가 다운로드 되기 전 일단 사용할 수 없는 화면을 먼저 보여줌) 필요하면 도입 가능

+) React의 개발환경으로 Node.js 필요
+) $ npm init -y 이후 $ npx serve: 파일로 서빙하는 웹서버 오픈

2. React 라이브러리

• 리액트의 핵심 모듈
  1) import ReactDOM from 'react-dom'; 리액트 컴포넌트 -> HTMLElement 연결
  2) import React from 'react'; 리액트 컴포넌트 생성

// ReactDOM.render(리액트 컴포넌트, 그려질 곳);

const Component = props => {
  return React.createElement(‘p’, null, `${props.message}`) // <p>메세지</p>
}

ReactDOM.render(
  React.createElement(Component, {message: ‘메시지’}, null),
  document.querySelector(‘#root’)
);