[소플 : React] 3. JSX

📌JSX?

A syntac extension to JavaScript
자바스크립트의 확장 문법

👉 JavaScript and XML

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

h1 태그로 둘러싸인 문자열을 element라는 변수에 저장

JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침
그래서 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가 나옴.

createElement()

JSX 코드를 자바스크립트 코드로 변환하는 리액트 함수.

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

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

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를 사용하지 않고 순수자바스크립트로 동일한 역활을 하게 할수는 있지만, JSX를 사용하면 코드가 더욱 간결해지고 생산성과 가독성이 올라가기 때문에 권장.

📌JSX장점

1. 코드가 간결해짐
2. 가독성이 향상
3. Injection Attack이라 불리는 해킹 방법을 방어함으로 보안성이 올라감

Injection Attack은 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법

<div>Hello, {name}</div>

React.createElement('div', null, `Hello, ${name}`);

📌JSX사용법

JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어감

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;  

큰 따옴표사이에 문자역을 넣거나 중괄호 사이에 자바스크립트 코드를 넣음

📎 요약

• JSX란?
  • 자바스크립트와 XML/HTML을 함께 사용할 수 있는 자바스크립트의 확장 문법
• JSX의 역할
  • JSX로 작성된 코드는 모두 자바스크립트 코드로 변환
  • 리액트는 JSX 코드를 모두 createElement() 함수를 사용하는 코드로 변환
• JSX의 장점
  • 코드가 간결해짐
  • 가독성 향상
  • Injection Attack을 방어함으로써 보안성이 올라감
• JSX 사용법
  • 기본적으로 모든 자바스크립트 문법을 지원
  • 자바스크립트에 XML과 HTML을 섞어서 사용
  • 중괄호를 사용하여 자바스크립트 코드를 삽입

💻 소플의 처음만난 리액트