01. Introducing JSX

Overview

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

이것은 문자열도 HTML도 아닌 자바스크립트의 확장된 문법 JSX이다.
JSX를 통해 UI 로직을 설명해 줄 수 있기 때문에 리엑트와 함께 사용하는 것을 권장한다.

📌 JSX란

리엑트에서 렌더링 로직이 UI로직과 연결된다는 사실을 받아들인다.
마크업와 비즈니스 로직을 분리하는 것이 아닌 "컴포넌트"라는 유닛으로 분리한다.
HTML처럼 생겼으나 마크업 언어가 아닌 자바스크립트 언어로 바벨로 변환이 되어지고, 비즈니스 로직을 작성할 수 있다.

Expressions in JSX

특징 1

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX는 중괄호 안에 모든 자바스크립트 표현식을 사용할 수 있다.
name이라는 변수에 할당된 값이 JSX에서 표현되어지고, if와 for문 등과 같은 자바스크립트 표현식을 모두 사용할 수 있다.

특징 2

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

자바스크립트의 map()함수를 사용해 JSX를 반복적으로 호출해주는 방식이다.
해당 방식에서 주의해야 할 점은 Key를 설정해주는 것이다.
Key는 엘리먼트의 고유성을 부여하기 위해 반복문 안 엘리먼트에 지정해줘야하고, <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 key를 가져야 한다.
Key는 형제 배열 안에서만 고유성을 지키면 되고, 전체 범위를 고려할 필요는 없다.

특징 3

<h1 className="title" onClick={onload}>Hello!!!</h1>

JSX는 자바스크립트와 가깝기 때문에 camelCase 프로퍼티로 사용해줘야 한다.
* class → className
* tabindex → tabIndex
* onclick → onClick