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

JSX란?

• JSX는 문자열도 HTML도 아니다.
• JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어 있다.
• JSX는 React 엘리먼트를 생성한다.
• JSX는 React.createElement(component,props,...children)를 호출하는 편리한 문법
• 리액트는 별도의 마크업과 로직을 분리하는 대신, 둘 다 포함하는 컴포넌트로 작성한다.
• 리액트에서 JSX 사용이 필수는 아니지만, 대부분 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움이 되며 에러 및 경고 메세지도 표시 할 수 있다.

---

JSX 규칙

1. 반드시 하나의 엘리먼트로 감싸야 한다.
2. 자바스크립트 코드를 적용할 땐 {} 안에 작성해야 한다.
3. if문을 사용할 수 없기 때문에 삼항연산자를 사용해야 한다.
4. 엘리먼트 클래스 이름을 적용할 때, className을 사용해야 한다.

>> JSX에 JavaScript 표현식을 쓰려면 어떤 방법?

a. { } 중괄호

예) const element=<img src={user.avataUrl} />;

b. " " 따옴표 : 속성에 따옴표를 이용하여 문자열 리터럴 정의 가능

예) const element=<div tabIndex="0" />;

주의 : "중괄호{}" 또는 "따옴표(문자열 값에 사용)" 중 하나만 사용

---

JSX에 표현식 포함하기

JSX의 중괄호({}) 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

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

JSX도 표현식이다

컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식

JSX는 주입 공격을 방지한다

JSX는 모든 값을 렌더링하기 전에 문자열로 변환되기 때문에 XSS(cross-site-scription)공격을 방지할 수 있다.

JSX는 객체를 표현

JSX는 React.createElement() 호출로 컴파일을 하며, 객체를 생성한다.

//JSX로 엘리먼트 생성
const element = (
  <h1 className="greeting">
    Hello, world
  </h1>
);

//React.createElement()로 엘리먼트 생성
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world'
);
  
//기본적으로 아래와 같은 객체를 생성
const element = {
  type: 'h1',
  props: {
  	className: 'greeting',
  	children: 'Hello, world'
  }
};

---

참고

React 엘리먼트 생성하기

• createElement()
  • JSX 엘리먼트는 단지 React.createElement()를 호출하는 편리한 문법일 뿐이며,
    JSX를 사용할 경우 메서드를 직접 호출하는 일은 거의 없다.
  • JSX로 작성된 코드는 React.createElement()를 사용하는 형태로 변환된다.

//createElement 기본 형식
React.createElement(
  type,
  [props],
  [...children]
)

JSX 없이 사용하는 React

리액트는 JSX 사용이 필수는 아니다.
만약 빌드환경에서 컴파일 설정을 하고 싶지 않을 때에는 JSX를 사용하지 않는 것이 편하고,
엘리먼트를 만들고 싶을 때는 React.createElement(component, props, ...children)으로도 만들 수 있다.

//JSX
class Hello extends React.Component {
  render() {
  	return <div>Hello {this.props.toWhat} </div>;
  }
}

ReactDOM.render(
  <Hello toWhat="world" />,
  document.getElementById('root')
);

//createElement()
class Hello extends React.Component {
  render() {
  	return React.createElement('div', null, 'Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'world'}, null),
  document.getElementById('root')
);

결론적으로 JSX는 React.createElement()를 편하게 호출하는 문법일 뿐이고,
또한 JSX는 React.createElement()를 사용하는 형태로 변환된다.