주요 개념

JSX 소개

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

• JS를 확장한 문법으로 React "엘리먼트"를 생성

React의 렌더링 로직은 UI로직( 1) 이벤트가 처리되는 방식, 2) 시간에 따라 state가 변하는 방식, 3) 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결됨

JSX에 표현식 포함하기

const name = 'sol'
const element = <h1>Hello, {name}</h1>
// JSX의 중괄호 안에는 JS표현식을 넣을 수 있음

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

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있음

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

• 헷갈리는 문법

const element = <img src="{user.imgUrl}"></img>; 
// 따옴표 : 문자열 값에 사용, 중괄호 : 표현식에 사용
// 둘 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안됨!

const element = <img src=`${user.imgUrl}`></img>; 
// jsx 내부에서는 템플릿 리터럴을 사용할 수 없기 때문에
// 따로 템플릿 리터럴 값을 가지고 있는 변수를 따로 작성하여 사용

//ex)
const name = `${user.name}`
const element = <img src={name}></img>; 

JSX는 HTML보다는 JS에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됨

JSX로 자식 정의

const el = (
  <div>
  	<h1>Hello!</h1>
  	<h2>Bye!</h2>
  </div>
);

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하므로, App에서 명시적으로 작성되지 않은 내용은 주입되지 않음. 모든 항목은 렌더링 되기 전에 문자열로 변환됨. 이런 특성으로 인해 XSS 공격을 방지할 수 있음

JSX는 객체를 표현함

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

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

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

===
  
const el = React.createElement(
  type: 'h1',
  props: {
  	className: 'greeting',
  	children: 'Hello, world!'
  }
);

이러한 객체를 "React 엘리먼트"라고 하며, 화면에서 보고 싶은 것을 나타내는 표현
React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지함