1.React란?

Facebook이 만든 UI 컴포넌트 라이브러리로 컴포넌트 기반 아키텍처
템플릿언어가 아닌 자바스크립트로 컴포넌트 작성하는 프로그래밍 언어이다.
특정 관심사에 집중된 기능 블록 (관심사의 분리)

1. 컴포넌트 기반으로 개발 이유

복잡한 문제(개발할 시스템)를 작게 나누어서 해결하기 위해 필요하다.컴포넌트 단위로 코드를 작성하면 캡슐화(테스트 가용성, 신뢰성), 확장성, 결합성, 재사용성 같은 이점이 있다.
각 부문이 각자의 관심사를 갖도록 컴퓨터 프로그램을 여러 부문으로 나누는 설계 원칙이 있다.

2.JSX

const hi =

Hi

;

위 문법은 자바스크립도 아니고 HTML 문법도 아니다. JSX는 자바 환경 안에서 HTML 문법을 쓸 수 있게 만든 React란 환경에서 쓰는 혼합형 프로그래밍 언어이다.

(1).JSX attribute

onst hi = ;
const myFavorite = {
food:

샐러드

,
animal:

dog

,
hobby:

programming

태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 표현해야 한다. 또한 자바스크립트에서 class 사용법과 구분짓기 위하여 JSX에서는 .
, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다. 

(2) Rendering

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

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.rende 함수를 사용한다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.

ReactDOM.render(

Hello, world!

, document.getElementById('root') );