리액트 JSX란?

JSX는 리액트에서 화면을 표시할 때 사용하는 문법입니다.

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

구조는 이렇게 생겼죠.

윗줄이 다 JSX가 아니고

<h1>Hello, world!</h1>

이 부분만 JSX문법입니다.

HTML과 똑같이 생겼죠?

HTML과 다른 점은 JSX내에 중괄호({})를 이용해서 값을 입력할 수 있다는 것입니다.

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

이렇게 사용할 수 있습니다. 

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

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

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

이런 방식으로도 사용할 수 있겠죠.

태그의 어트리뷰트에도 값을 넣을 수 있습니다.

const element = <a href="https://www.reactjs.org"> link </a>;

이렇게 된 것을 

const element = <img src={user.avatarUrl}></img>;

중괄호를 이용해서 값을 넣을 수 있습니다.

이렇게 작성을 하면 화면 부분을 분리해 좀 더 쉽게 표현할 수 있습니다. 

그리고  JSX를 사용하면 주입공격을 방지할 수 있습니다. 

JSX에 삽입된 모든 값을 랜더링 하기 전에 이스케이프하기 때문에

명시적으로 작성하지 않은 내용은 주입되지 않기 때문입니다.

이후 작성되는 모든 컴포넌트들도 JSX를 이용해서 화면에 출력하게 됩니다.