JSX

JSX

const hi = <p>Hi</p>;

위의 문법은 JSX라고 불리는 JS 확장버전이다. syntax extension for JS라고 한다. HTML과 아주 비슷하게 생겼고 JS 파일 내에서 작성할 수 있다.

JSX는 원래의 JS 문법이 아니기 때문에, JS 파일내에 JSX 문법이 있으면 브라우저에서 해석하지 못한다.

React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 JS 문법으로 변환시키는 컴파일 과정이 필요하다.

JSX element

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobbyL: <li>programming</li>,
};

JSX attribute

태그에 속성을 주고 싶을 때는 항상 ““로 감싸야한다.

예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>,
};

Self-Closing Tag

JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />과 같이 항상 /로 끝내줘야한다.

Nested JSX

중첩된 요소로 만들려면 ()로 감싸야한다.

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

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

const wrong = (
<p>list1</p>
<p>list2</p>
); // 잘못된 코드

const right = (
    <div>
        <p>list1</p>
        <p>list2</p>
    </div>
); // 맞는 코드

Rendering

html 요소, 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 Rendering 이라고 말한다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용한다.

첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container를 전달한다.

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