JSX

JSX 소개

• JSX란 javascript를 확장한 문법으로써 React element를 생성하기 위해 사용됨.
• 기본적으로 React element에는 HTML 태그가 포함되어 있고 문자열도 포함되어 있음.

const name = 'kim sang hyeon';
const element = <h1>Hello, {name}</h1>;

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

• JSX이 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있음

const expression = (user) => user.firstName + " " + user.lastName;

const user = {
  firstName: 'Sang Hyeon',
  lastName: 'Kim',
};

const element = (
  <h1>
    Hello, {expression(user)}
  </h1>
)

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

• JSX도 표현식이다. 표현식이란, 값 하나로 만들어지는 자바스크립트 코드 조각이다. 따라서 if구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있음.

const variable = <h1>Hello</h1> 

const user = true;

const example = (user, variable) => {
  if (user) {
    return variable;
  }
  return <h1>hi</h1>;
} 

• JSX의 HTML 속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있음. 리터럴이란 변수에 넣는 변하지 않는 데이터를 의미함.

const element = <div height="100px"></div>
// height는 상수, 리터럴은 "100px"이다

• 중괄호를 사용하여 Attribute에 Javascript 표현식을 삽입 할 수 있음.

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

• Babel은 JSX를 React.createElement() 호출로 컴파일함.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
); 

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}; // 이런 객체를 React element라고 함.