아래 변수 선언을 살펴보자.

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

위에 희한한 태그 문법은 문자열도, HTML도 아니다.

JSX라 하며 Javascript를 확장한 문법이다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, Javascript의 모든 기능이 포함되어 있다.

JSX는 React "엘리먼트(element)"를 생성한다. 다음 섹션에서 DOM에 어떻게 렌더링하는지 알아보자. 아래를 보면 JSX를 시작하기 위해 필요한 기본사항을 찾을 수 있다.

JSX란?

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다.

React는 별도의 파일에 마크업과 로직을 넣거 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 영상이 확신을 줄 것이다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 Javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

일단 한번 시작해보자!

JSX에 표현식 포함하기

아래 예시에서는 name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였다.

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

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

JSX의 중괄호 안에는 유효한 모든 Javascipt 표현식을 넣을 수 있다. 예를 들어 2 + 2, user.firstname 또는 formatName(user) 등은 모두 유효한 Javascript 표현식이다.

아래 예시에서는 Javascript 함수 호출의 결과인 formatName(user)을 <h1> 엘리먼트에 포함했다.

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')
);