React - 1. JSX

JSX

const greeting = <div>Hello?</div>;

It is called JSX, and it is a syntax extension to JavaScript.

HTML과 비슷하게 생긴 이것은, JSX라고 하는 자바스크립트의 확장버전입니다. 리액트에서는 자바스크립트에 써야하는 그 모든 element를 쓰는 대신에 JSX를 사용합니다. 이게 도대체 어찌 가능한 것일까요?

우리가 이렇게 작성한 JSX 파일을, 리액트는 원래의 정규 자바스크립트 문법으로 컴파일 한다고 합니다.

JSX Element

우리는 그동안 태그가 들어가는 html 문법은 HTML파일에, 자바스크립트에서는 돔으로 표현을 해왔습니다.
JSX 에서는 HTML 문법을 JavaScript 코드 내부에 써주면 됩니다.
변수에 저장할 수도, 함수의 인자로 넣을 수도 있으니 자바스크립트 때에 비교하면 상상하기도 힘든 자유로움이죠? ( 리액트는 참 유도리 있는 것 같습니다.)

const greeting = <div>Hello?</div>;

const MyFavorite = {
  food: <li>김치찌개</li>
  animal: <li>Cat</li>,
  hobby: <li>Mossing</li>
}

JSX attribute

우리는 태그에 attribute, 속성을 주고 싶을 때는 항상 ""을 쓸 것입니다.

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

리액트에서 보여준 예시 인데요, 보면 자바스크립트에서는 클래스를 지정할 때 class 로 했던 것과 달리 JSX 에서는 className 으로 표현했습니다. 클래스를 스스로 만들 수도 있다고 합니다.
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
이 부분을 보면 직접 속성을 만드는 예시들이 나와있으니 참고하면 좋을 것 같습니다.

또 우리가 자바스크립트에서 썼던 것처럼, CamelCase를 쓴다고 합니다.

Self-Closing Tag

우리는 항상 태그를 쓸 때면 몇몇 경우를 제외하고는 오픈 태그와 클로징 태그가 있었습니다. 하지만 역시 유도리 있는 언어 답게 어떤 태그라고 하더라도 self closing tag가 가능하다고 합니다.

1. 소괄호로 감싸기
중첩된 요소를 만들려면 () 소괄호로 감싸야 합니다.

```jsx
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

const start = (
<div>
    <p>always</p>
    <p>one</p>
</div>
);

ReactDOM.render(  // 내가 쓴 아래의 html을 id가 root인 컨테이너에 뿌려줘!!
  <h1>It's time to REACTTT</h1>,
  document.getElementById('root')
);

ReactDOM.render(<App />, document.getElementById('root'));