React.js 시작하기(1)

React.js

React.js는 JavaScript를 더 효율적이고 생산적이게 이용할 수 있도록 하는 JS 라이브러리다.

vanilla JS에는 React.js의 라이브러리와 문법이 존재하지 않기 때문에 이를 import from을 통해 끌어와준다.
import React는 리엑트팀에서 구성한 리엑트 라이브러리를 가져오는 것이고,
import ReactDOM은 가져온 라이브러리를 실질적으로 쓸 수 있게 해주는 문법이다.

JSX

기존 vanilla JS문법으로 Hello, world!를 띄우기 위해서는 대략 다음과 같은 코드를 입력한다.

const makeH1 = document.createElement("h1");
    document.querySelector("body").appendChild(makeH1);
    document.querySelector("h1").innerHTML = "Hello world";

원하는 타겟을 찾아가기 위해 유사한 DOM을 이용해 코드가 반복되는 것을 볼 수 있다. 하지만, React.js의 JSX는 이러한 불편함을 다음과 같이 쉽게 해결해준다.

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

ReactDOM.render의 첫 번째 프로퍼티는 무엇을 구현할지이고, 두 번째는 어디에 구현할지 설정하는 것이다. 반복되는 코드를 줄이기때문에 훨씬 효율적이고, 기존 html문법을 이용함으로써 더 직관적인 코드 분석이 가능하다.

JS파일에서 HTML문법을 이용할 수 있기때문에 다음과 같은 구조다.