[React] JSX에 대해 알아보기

JSX란?

- A synyax extension to JavaScript (자바스크립트의 확장 문법)

- JavaScript + XML/HTML

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

---

JSX의 역할

- XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다

/* JSX를 사용한 코드 */

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



/* JSX를 사용하지 않은 코드 */

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


/* React.createElement()의 결과로 자바스크립트 객체가 생성됨  */

const element = {
   type: 'h1',
   props: {
      className: 'greeting',
      children: 'Hello, world!'
   }
}

 

createElement()의 매개변수

• type,
• [props],
• [...children]

 

---

JSX의 장점

1. 코드가 간결해진다

/* JSX 사용함 */
<div> Hello, {name} </div>

/* JSX 사용 안함 */
React.createElement( 'div', null, `Hello, ${name}` );

2. 가독성이 좋아진다 (->버그를 발견하기 쉬워진다)

3. 보안성이 올라간다 (->Injection Attacks 방어)

 

---

JSX 사용법

XML/HTML + 자바스크립트 문법

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

 

태그의 속성(attribute)에 값을 넣는 방법

// (1) 큰 따옴표 사이에 문자열 넣기
const element = <div tabIndex="0"></div>;

// (2) 중괄호 사이에 자바스크립트 코드 넣기
const element = <img src={user.avatarUrl}></img>;

 

자식(children)을 정의하는 방법

// 자식을 정의하는 방법


const element = (
   <div>
      <h1>안녕하세요</h1> //div의 자식
      <h2>리액트 공부중입니다</h2> //div의 자식
   </div>
);

 

 

---

jsx 파일을 생성한 뒤

index.js에 jsx파일을 import해서 웹사이트에 출력해볼 수 있도록 했다