TIL | JSX

JSX

JSX는 JavaScript의 확장버전이다.
JSX는 JavaScript도 아니고 html도 아니다.
React.js를 사용하기 위해서 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.

JSX element

HTML 문법을 JavaScript 코드 내부에 써주면 그게 바로 JSX이다.

JSX attribute

태그에 attribute(속성)를 주고 싶을 때는 항상 ""로 감싸줘야 한다.
attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name과 다를 수 있다.

JSX에서 class를 주고 싶을 때 원래 HTML에서 사용하는 속성명은 class이지만 JSX에서는 className을 사용한다.

Self-Closing Tag

JSX에서는 어떤 태그라도 self-closing tag가 항상 가능하다.

Nested JSX

1. (필수) 소괄호로 감싸기

const good = (
  <div>
    <p>hi</p>
  </div>
);

중첩된 요소를 만들기 위해서 소괄호로 감싸주어야 한다.

2. (필수) 항상 하나의 태그로 시작

const wrong = (
  <p>list1</p>
  <p>list2</p>
);

위와 같이 제일 처음 요소가 sibling이면 안된다. 무조건 하나의 태그로 감싸져야 한다.

const right = (
  <div>
    <p>list1</p>
    <p>list2</p>
  </div>
);

Rendering

html 요소나 React 요소 등의 코드가 눈으로 볼 수 있도록 화면에 그려지는 것을 렌더링이라고 한다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수가 필요하다.
첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.

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