React

React란 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.
React는 선언형, 컴포넌트 기반이 특징이다.

선언형

선언형 프로그래밍과 반대되는 개념이 절차형 프로그래밍이다.
청소를 할 때, 절차적 방식은 먼지 털기 → 바닥 쓸기 → 걸레질하기이다.
선언적 방식은 깨끗한 방의 모습을 그리기 → 그림을 로봇에게 전달하기이다.
즉, html 요소를 JavaScript에서 DOM에 접근해 수정하고 다시 html로 내보내던 기존의 방식 대신, React는 JavaScript에서 virtual DOM을 생성하고 수정을 끝낸 후 렌더링한다.

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다.

Component(컴포넌트) 기반

React에서는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만든다. 그리고 이를 조합해 복잡한 UI를 만든다.
컴포넌트 로직은 JavaScript로 작성되므로 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있다.

Node

Node는 JavaScript 실행 환경이다.
기존에 웹 브라우저에서만 실행되던 JavaScript는 Node를 통해 웹 브라우저 바깥에서도 실행할 수 있게 되었다.
React는 Node 서버에서 렌더링할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있다.

JSX

JSX(Javascript Syntax Extension)는 JavaScript 확장 문법이다.
HTML과 비슷하게 생겼고 javascript 파일 내에서 작성할 수 있다.

Babel

JSX는 원래의 JavaScript 문법이 아니기 때문에, .js 파일내에 JSX 문법이 있으면 브라우저가 해석하지 못하고 문법 오류가 난다. 따라서 React를 사용할 때 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다. 이 컴파일을 해주는 것이 바로 Babel(바벨)이다.
Babel은 JavaScript compiler로서, 일반적으로 ES6 문법을 구형 브라우저에서도 동작할 수 있도록 변환하는 데 많이 사용된다. React에서 Babel은 JSX를 JavaScript 코드로 변환해 브라우저가 해석할 수 있게 해준다. CRA(Create React App)으로 React를 설치하면 node_module 폴더 안에 @babel이 자동으로 생성된다.

JSX element

JSX는 JavaScript 코드 내에서 HTML 문법을 그대로 쓸 수 있게 해준다. .js 파일 어디에서나 필요한 곳에 작성할 수 있다. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

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

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

JSX attribute

태그에 attribute(속성)을 줄 때는 html에서와 마찬가지로 항상 "" 쌍따옴표로 감싼다. 단, JavaScript 문법―변수나 함수 등―을 사용하고 싶다면 {}중괄호로 감싼다.
React DOM은 HTML 어트리뷰트(attribute) 이름 대신 캐멀케이스(camelCase)를 네이밍 컨벤션으로 사용한다. 예를 들어, JSX에서 tabindex는 tabIndex로 작성한다. class 어트리뷰트는 JavaScript의 예약어이므로 className으로 작성한다. <label> 태그의 for 어트리뷰트는 JSX에서 htmlFor로 작성한다. 이는 JSX 문법이 JavaScript 문법과 겹치는 것을 막기 위함이다. 더 자세한 컨벤션은 react 공식문서에서 참고할 수 있다.

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

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

Self-Closing Tag

JSX에서는 어떤 태그/컴포넌트라도 Self-Closing Tag가 항상 가능하다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 한다.
<div />와 <div></div>는 같은 표현이다. 컴포넌트도 마찬가지로 <MyComponent /> 또는 <MyComponent></MyComponent>와 같이 항상 클로징을 해주어야 한다.

Nested JSX

소괄호로 감싸기

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

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

항상 하나의 태그로 시작

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

위와 같이 제일 처음 요소가 sibling이면 안 된다. 무조건 하나의 태그로 감싸져야 한다. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸주어야 한다.

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

Rendering

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

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

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