JSX - React

JSX

JSX는 javascript의 확장판이라고 생각하면 된다.
React 내에서 사용되며, 몇 가지 기본적인 규칙이 있다.

1. 반드시 하나의 element로 감싸야 한다.
2. Javascript 코드를 적용할 땐 {} 안에 작성해야 한다.
3. JSX 내부에선 if 문을 사용할 수 없다! (IIFE or ternary operator 사용)
4. Element에 class를 적용시킬 때에는 className으로 적용시킨다.

JSX에 표현식 포함하기

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

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

const element = (
  <h1>
    Hello, {formatName(user)}!                
  </h1>
);
//h1 엘리먼트 안에 formatName(user) 호출의 결과값을 담고 있다.

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

JSX도 표현식이다!
컴파일이 끝나면 JSX 표현식이 정규 Javascript 함수 호출이 되고 Javascript 객체로 인식된다.
다시말해 JSX를
if구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다!

unction getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>

  return <h1>Hello, Stranger.</h1>
}

JSX 속성 정의

//속성에 따옴표를 이용하면 문자열 리터럴을 정의할 수 있다.
const element = <div tabIndex="0"></div>

//중괄호를 사용하여 attribute에 Javascript 표현식을 삽입할 수도 있다.
const element = <img src={user.avatarUrl}></img>

//attribute에 Javascript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하면 안 된다!
//문자열 값에는 따옴표, 표현식에는 중괄호 식으로 하나만 사용하고, 동일한 attribute에 두 가지 동시 사용은 안 된다!

JSX는 주입 공격을 방지한다
JSX에 사용자 입력을 삽입하는 것은 안전하다.
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 escape하므로,
애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링 되기 전에 문자열로 변환된다.
이런 특성으로 XSS 공격을 방지할 수 있다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>

JSX는 객체를 표현한다
Babel은 JSX를 React.createElement() 호출로 컴파일한다.
아래의 두 예시는 동일한 코드이다.

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

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

React.createElement() 는 버그없는 코드를 작성하는 데에 도움이 되도록 몇가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
//이러한 객체를 React element라고 한다!