리엑트가 개발된 이유는 페이스북에서 페이스북의 UI를 더 잘 만들기위해서 고민을 하다 나온게 리엑트이라고 한다. 가장 쉽게 생각하면 리엑트는 자바스크립트 UI Library라고 생각하면 된다.

그러면 리엑트를 본격적으로 공부하기전에 라이브러리 그리고 프레임워크라는 컨셉이 뭔지 그리고 리엑트를 왜 쓰는지에 대해서 알아보자!

What is Framework and Library?

이 두가지 컨셉을 쉽게 이해하기 위해서 F1 레이스카를 만드는 과정을 예로 들어보자.

F1 레이스카를 만드는 과정에서 꼭 사용해야하는 요소와 메뉴얼을 따라서 조립을 해야하는 규약들이 있을 것입니다.

이 요소들과 지켜야 되는 규악이 바로 프레임워크 입니다.

F1 레이스카를 만들 때에는 여러가지 도구들이 필요합니다. 모든 F1 레이스카가 똑같지는 않으므로 각각의 레이스카를 만들때에는 엔지니어가 원하는 특정 도구들을 사용해 레이스카를 조립 하게됩니다.

레이스카를 만들때 필요한 이 도구들이 라이브러리 입니다.

JSX

React를 사용하기 위해서는 JSX라는 스페셜한 문법을 알아야 합니다. JSX는 JavaScript 확장버전입니다. Syntax Extension for JavaScript라고 합니다.

JSX는 HTML문법을 JavaScript 코드에 써주면 됩니다. .js파일 어디에서는 필요하면 작성하면 됩니다.

const hi = <p>Hi</p>;
const myFavoriteThings = {
	food: <li>salad</li>
    animal: <li>dog</li>
    hobby: <li>golf</li>
};

JSX attribute

태그에 attribute(속성을) 주고 싶을 때는 항상 " " 쌍따옴표로 감싸주면 됩니다.

class를 주고 싶을 때 원래 속성면은 class이지만 JSX에서는 className을 사용합니다.

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

Self-Closing Tag

그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다.

<div />와 <div></div>는 같은 표현입니다.

Rendering

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

ReactDOM.render 함수를 사용해서 리엑트 요소를 화면에 렌더합니다.

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