1. React

React.js 는 JavaScript의 라이브러리

• 왜 React를 쓰는가?

탄생 배경 )
기존 MVC패턴에서는 동적인 기능을 위해 항상 페이지 전체를 로드해야 했다 .
예를 들어 좋아요 하나가 늘어나게 된다면, 좋아요 하나를 위해 페이지 전체를 로드 하는 것이다.
또 웹 과 안드로이드, 아이폰에 맞는 화면도 서버에서 따로 구성하여 각 각 맞게 보내주어야 한다.

해결 )

• 정적인 부분과, 동적인 부분을 구분하여 페이지를 만든다면 페이지를 효율적으로 로드 할 수 있다.
• 서버에서 사용자에게 데이터를 보내주고, 사용자의 브라우저에서 html, css, javascript로 랜더링 해준다면 개발자는 하나에만 집중할 수 있다.

2. JSX

const hi = <p>Hi</p>;

위의 문법은 JSX라고 불리는 JavaScript 확장 버전이다.
(syntax extension for JavaScript)

그러나.. JSX는 원래의 JavaScript 문법이 아니기 때문에, js 파일내에 JSX 문법이 있으면 부라우저에서 해석하지 못한다...

React.js를 사용하기 위해 JSX 문법이 있다면, 해당 파일을 정규 javascript문법으로 변환시키는 컴파일 과정이 필요하다.

1. element

• HTML 문법을 JavaScript 코드 내부에 써주면 JSX 이다.

const hi = <p>Hi</p>;
const myFavorite = {
	food: <li>샐러드</li>
   	animal: <li>강아지</li>
    	hobby: <li>프로그래밍</li>
        };

2. attribute (속성)

• 태그에 attribute(속성)을 주고 싶을 때는 항상 ""따옴표로 감싸주자.

const hi = <input readOnly ={true} />;
const myFavorite = {
	food: <li>샐러드</li>
   	animal: <li>강아지</li>
    	hobby: <li className="list-item">프로그래밍</li>
        }; 

3. Self-Closing Tag

• JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다.

const good = (
<div>
	<p>hi</p>
</div>
);

• 중첩된 요소를 만들려면 () 소괄호로 감싸주어야 한다.
• 항상 하나의 태그로 시작해야 된다.

4. Rendering

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