JSX

JavaScript XML의 줄임말로, React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법이다.
하지만, JSX는 자바스크립트 엔진이 파싱할 수 있는 JavaScript 코드가 아니기 때문에 Babel을 이용해 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다.

JSX 규칙

1. 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
   여러 엘리먼트들이 있으면 감싸주는 엘리먼트가 반드시 필요하다.

return(
<div>
  <div></div>
  <div></div>
</div>
);

2. React에서 CSS class 속성을 지정하려면 "className"으로 표기해야한다.

<div className = "greeting">Hello</div>

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.
대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

function Hello() {
  return (
      <div>Hello</div>
  );
}

function HelloWorld() {
  return (
      <Hello />;
  );
}

3. JSX에서 JavaScript를 사용하기 위해서는 중괄호{}를 이용해야 한다.

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

4. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용한다.

function App() {
  const name = 'react';
  return (
    <>
      <div>{name === 'react' ? <h1>리액트입니다.</h1> : <h1>리액트가 아닙니다</h1>}</div>
    </>
  );
}

5. 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.
   map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

❕Tip
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정한다. key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 하는데, 이는 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문이다. 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있다. 하지만 배열 인덱스는 최후의 수단(as a last resort)으로만 사용한다.