React?

React 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브버리

1.React와 같은 프로트엔트 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해준다는점
2. React는 가상돔을 통해 UI를 빠르게 업데이트
가상돔 : 이전 UI 상태를 메모리에 유지해서 변경될 ui의 최소 집합을 계산하는 기술
3. 이 기술 덕분에 불필요한 UI 업데이트는 줄고 성능은 좋아진다.

1. JSX(JavaScript XML)

const bye = <p>bye</p>;

위의 코드는 javascript같기도하고 html같기도하다.
이 코드의 문법은 JSX라고 불리는 JavaScript 확장버전이다.
HTML과 아주 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있다.
JSX는 원래의 JavaScript 문법이 아니기 때문에, .js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못한다.
React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.

1. JSX element

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

const myFavorite = {
    food: <li>피자</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
};

HTML문법을 JavaScript 코드 내부에 써주면 그것이 JSX이다.
js 파일 어디에서나 필요한 곳에 작성하면되고 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

2. JSX attribute

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>피자</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};

태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸야하고
class를 주고 싶을 때 원래 속성명은 class이지만 자바스크립트에서 예약어가 있기때문에 JSX에서는 className을 사용해야 한다.

그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다.<input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 한다.

<div /> === <div></div>

3. Nested JSX

1. 소괄호로 감싸기

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

중첩된 요소를 만들려면 () 소괄호로 감싸야한다.

2. 항상 하나의 태그로 시작

const wrong = (
<p>list1</p>
<p>list2</p>
); // X

위와 같이 제일 처음 요소가 sibling이면 안되고 무조건 하나의 태그로 감싸져야 한다.

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
); // O

2. Rendering

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

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

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