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

JSX은 자바스크립트를 확장한 문법으로 UI가 어떻게 생겨야 하는 지 설명하기 위해서
React와 함께 사용할 것을 권장한다.
JSX은 React엘리먼트(element)를 생성한다.

JSX란?

React에서 본질적으로 렌더링 로직이 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식 화면에 표시하기위해 데이터가 준비되는 방식과 같은 UI로직과 연결된다.

React는 별도의 파일에 마크업과 로직을 넣어 분리하는 대신 둘 다 포함하는 컴포넌트로 분리한다.

JSX에 표현식 포함하기

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

ReactDom.render(
	element,
  	documet.getElementById('root')
);

JSX의 중괄호 안에는 유효한 모든 JS의 표현식을 넣을 수있다.

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

const user = {
  firstName: 'Camille',
  lastName: 'Son'
};

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

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

JSX도 표현식이라고 할 수 있다. 컴파일이 끝나면 JSX의 표현식이 정규 JS함수 호출이 되고 객체로 인식이된다.

JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

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

중괄호를 사용하여 어트리뷰트에 JS표현식을 삽입할 수있다.

const element = <img src= {usr.camilleUrl}></img>
  

JSX로 자식 정의

태그가 비어있다면 />를 이용해 바로 클로징 해주어야한다.

JSX는 주입공격을 방지한다.

const title = respomse.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;

style 과 className

JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다르다.
우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 한다.

import React from 'react';
import Hi from './Hi';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 18, // 기본 단위 px
    padding: '3rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hi />
      <div style={style}>{name}</div>
	  <div className="gray-box"></div> 
    </>
  );
}

export default App;