리액트 공식문서 JSX

JSX 소개

const element = <h1>Hello, world!</h1>; 위의 희한한 태그 문법은 문자열도, HTML도 아닙니다.

💡 JSX라 하며 JavaScript를 확장한 문법입니다.

JSX 표현식 포함하기

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

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

💡 element라는 변수안에 html태그가 들어간 jsx표현을 쓸 수 있다.

// 리턴 하는 함수.
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
// 객체를 정의 한다.
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
// element라는 변수에다가 <h1>엘레멘트 안에 함수 리턴값을 바인딩 해주었다.
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

JSX 표현식

JSX를 If 구문 및 for loop안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로 부터 반환 할 수 있다!

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

💡 조건문에서 return 값으로 JSX를 뱉을 수 있다.