스터디 6주차 주간 공부

React beggining

JSX

JSX란 자바스크립트의 신텍스 익스텐션이다. React와 같이 사용되기 위한 문법이다. 브라우저는 JSX를 바로 해석하지 못하기 때문에 JSX 컴파일러가 필요하다.
JSX의 최소 구성 단위를 JSX element라고 한다. HTML과 똑같은 형태이지만 javascript file에서 읽힌다. 그 결과로 우리는 변수, 함수, 객체 등에 JSX elements 들을 할당할 수 있다.

const navBar = <nav>I am a nav bar</nav>;

nesting

네스팅을 할수 있고, 줄바꿈을 사용하려면 () 으로 감싸줘야 한다. 그러나 주의할 점은 하나의 outer tag가 있어야 한다는 것. 안그러면 error.

const myDiv = (
  <div>
    <h1>
      Hello world.
    </h1>
  </div>
)

render

ReactDOM의 render() 메서드로 캔버스에 렌더를 시켜준다. 두개의 arguments를 받는다.!

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'))

The Virtual DOM

리액트의 강점 중에 하나가 변화가 있는 element들만 DOM에 렌더를 해준다는 점인데, 불필요한 렌더를 하지 않음으로써 속도도 향상할 수 있다. 이를 가능하게 해준게 virtual DOM이다.