[React.js] 2. JSX란

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

 

위는 Javascript를 확장시켜 만든 JSX 라고 불리는 녀석입니다.

javascript 안에 마크업을 넣는 것처럼 보입니다.

 

 

JSX는 아래와 같은 성격을 가집니다.

 

 

1. 중괄호

- name 이라는 변수를 중괄호안에 넣어 JSX인 element에 담아서 사용

- JSX 중괄호 안에서는 Javascript 표현식을 모두 사용 가능

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

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

 

- 아래와 같이 함수 호출 결과, 객체도 모두 엘리먼트에 포함 가능

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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

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

 

- JSX 자체를 가지고 표현식으로 사용가능

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

- JSX 속성 정의도 넣을 수 있음

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

 

 

2. JSX 는 딱 한개의 태그를 가지는 것이 아니다.

- 태그가 한개일때는 아래와 같이 />을 이용해 바로 닫아줌.

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

 

- 태그가 여러개일때 (자식을 가질때) 는 아래와 같이 사용할 수 있습니다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

 

 

3. Injection Attach 을 방지합니다.

- React DOM은 JSX에 삽입된 모든값을 렌더링하기전에 이스케이프하므로 Injection Attach을 방지할 수 있음.

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

 

 

 

React Element가 생성되는 과정은 아래와 같습니다.

 

- element 객체가 만들어지면, babel 을 통해 React.createElement() 호출합니다. 

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

// 위와 아래는 같은 내용입니다.

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

 

- createElement는 몇가지 검사를 수행한후 아래와 같은 객체를 생성합니다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

 

이러한 객체를 React Element 라고 부릅니다~!

 

 

 

 

 

 

출처 : https://ko.reactjs.org/docs/introducing-jsx.html