[React]는 UI를 만들기 위한 자바스크립트 라이브러리 by 페이스북

 

리액트 (React)는 페이스북이 만든 오픈소스 자바스크립트 라이브러리다.

모던한 유저 인터페이스 (User Interface: UI)를 만들기 위한 도구이다.

리액트는 HTML과 자바스크립트를 함수적으로 합쳐서 마크업 언어 JSX를 만든다.

 

자바스크립트에서 확장된 JSX

HTML을 직접 자바스크립트에 사용할 수 있게해준다.

JSX는 HTML과 사용법이 비슷하다.

자바스크립트를 직접 JSX에 사용할 수 있다.

{'이렇게 중괄호안에 넣으면 자바스크립트로 사용된다'}

JSX는 자바스크립트가 아니라 꼭 컴파일되어야 된다, 'The transpiler Babel'이 해준다.

 

 

JSX 규칙

꼭 하나의 엘리먼트가 리턴되어야 된다.

 

사용 O

const JSX = <div>
  <p>가나다</p>
  <p>라마바</p>
  <p>사아자</p>
</div>

 

사용 X

const JSX =  <p>가나다</p>
  <p>라마바</p>
  <p>사아자</p>

 

이렇게 괄호를 사용하기도 한다

const JSX = (
  <div>
    <p>가나다</p>
    <p>라마바</p>
    <p>사아자</p>
  </div>
);

 

JSX 주석달기

코드를 알아보기 쉽게 주석을 달려면

{/* */} 을 사용하면 된다.

const JSX = (
  <div>
  {/* 이렇게 주석을 단다 */}
    <p>가나다</p>
    <p>라마바</p>
    <p>사아자</p>
  </div>
);

 

 

React의 API ReactDOM

ReactDOM은 React API로 HTML DOM에 직접 준다(render)

사용법

reactDOM.render(넣을 것, 넣을 장소)

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>DOM에 넣어보자(render)</p>
  </div>
);

ReactDOM.render(JSX, document.getElementById('id'))