1.JSX

1.1 JSX란 ?

• JSX란 리액트에서 대한 사용하는 자바스크립트 확장 문법이다
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

1.2 JSX의 특징

• 감싸인 요소(Fragment)
• 자바스크립트 표현
• className
• Inline Styling

예시

예시 1)

const element = <h1>Hello, world!</h1>;

위의 희한한 태그 문법은 문자열도 HTML도 아니다. 바로 JSX다.
JSX란 자바스크립트를 확장한 문법으로 JSX는 React 엘리먼트를 생성한다

예시 2)

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

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

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

JSX attribute

• 태그에 속성(attribute)을 주고 싶을 때 항상 "" 쌍따옴표로 감싸준다.
• class를 주고 싶을 때는 원래 속성명인 class가 아닌 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 가 항상 가능하다
  <input>태그와 같이 하나의 태그가 요소인 경우에는 <input />
  와 같이 항상 /으로 끝내줘야한다.

Nested JSX

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

1) (필수) 소괄호로 감싸기
: 중첩된 요소를 만들려면 ()로 소괄호로 감싸야 한다

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

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

위와 같이 제일 처음 요소가 sibling이면 안됩니다. 무조건 하나의 태그로 감싸져야 합니다. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸주세요.

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

Rendering 이란?

• html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 한다

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

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