React와 JSX

 

JSX란?

- JSX는 리액트에 필수적이진 않지만 리액트 경험을 훨씬 편리하게 만드는, 리액트에 특화된 XML이다.

- JSX 문법을 이용해서 createElement 사용 없이 리액트에 바로 HTML을 삽입할 수 있다.

 

const myelement = <h3>JSX를 사용하면 짱 편리하다구!</h3>;
const myelement = React.createElement('h3', {}, '나 그냥 JSX 안 쓸래!');

 

위가 JSX를 사용한 버전, 아래가 JSX를 사용하지 않은 코드다. 한 눈에 봐도 위가 더 편리하다.

 

 

JSX안에 함수 넣기

 

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

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

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

 

함수 안에 JSX 넣기

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