React

• React는 js의 라이브러리이다.

JSX

• js의 확장버전으로 javascript syntax extension
• js의 문법이 아니기 때문에 .js 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못한다.
• React.js를 사용하기 위해 JSX 문법이 있으면 해당 파일을 정규 js문법으로 변환시키는 컴파일 과정이 필요하다.

JSX element

• HTML 문법을 js내부에 써주면 그것이 바로 JSX!
• 변수에 저장할 수 있고 함수의 인자로 넘길 수 있다.

JSX attribute

• 태그에 속성을 주고 싶을 때는 ""로 감싸주기
• HTML에서 쓰는 속성명과 다를 수 있으니 [react 공식문서] 참고(https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes)

Self-Closing Tag

• JSX는 어떤 경우에도 self closing을 해주어야한다.
• <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내야함
• <div />와 <div></div>는 같은 표현

Nested JSX

1. (필수) 소괄호로 감싸기
2. (필수) 항상 하나의 태그로 시작

Rendering

• html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다.
• React 요소가 DOM node에 추가되어 화면에 렌더되려먼 ReactDom.render 함수를 사용한다.
  • 첫 번째 인자에는 JSX로 React요소를 넘기고, 두 번째 인자는 해당요소를 렌더하고 싶은 container(부모요소)를 전달한다.

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