[ReactJS] React JSX (React 기본 -3장)

1. JSX란?

JSX는 React의 문법으로 HTML문법을 잘 알고있다면 자바스크립트 코드내에서 HTML코드를 손쉽게 작성할 수 있도록 지원하는 문법입니다.

 

2. JSX의 적용

 

- JSX 적용 전

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return React.createElement('div', null, React.createElement('h1', null, 'Hello React'));
  }
}
 
export default App;

 

- JSX 적용 후

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    );
  }
}
 
export default App;

 

위 두가지의 방식은 "Hello React"라는 문구를 출력하는 동일한 코드입니다.

HTML문법을 알고있는 저의 입장으로는 한 눈에 딱 봤을때 JSX를 적용했을때의 코드가 더 눈에 잘들어오고 직관적으로 다가옵니다.

 

 

3. JSX의 규칙

 

1. 하나의 컴포넌트에서 최종적으로 return하는 태그는 1개이어야 된다.

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
        <h1>Bye React</h1>
      </div>
    );
  }
}
 
export default App;

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
      </div>
      <div>
        <h1>Bye React</h1>
      </div>
    );
  }
}
 
export default App;

 

위 두가지 코드의 차이를 보면

위의 코드는 최종적으로 div태그 하나를 return하고,

아래의 코드는 최종적으로 div태그 두개를 return합니다.

결과적으로 하나의 컴포넌트내에서 return가능한 태그는 1개이고 그 태그 내의 내용은 제약이 없습니다.

 

 

2. JSX내에서 자바스크립트 코드를 사용해야 될때는 중괄호{}로 감싼다.

import React, { Component } from 'react';
 
const hello = 'Hello React';
const bye = 'Bye React';
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>{hello}</h1>
        <h1>{bye}</h1>
      </div>
    );
  }
}
 
export default App;

 

위 코드는 "Hello React"라는 문자열과 "Bye React"라는 문자열을 각각 hello, bye변수에 저장을 해놓고 그 변수를 JSX문법을 통해 출력을 하는 코드입니다.

위와 같이 자바스크립트 변수로 선언된 hello변수와 bye변수를 각각 중괄호{}로 감싸서 사용합니다.

 

 

3. JSX내에서의 HTML속성 지정방식

import React, { Component } from 'react';
 
const hello = 'Hello React';
const bye = 'Bye React';
 
class App extends Component {
  render() {
    return (
      <div className="container">
        <h1 onClick={}>{hello}</h1>
        <h1 onClick={}>{bye}</h1>
      </div>
    );
  }
}
 
export default App;

 

기존 HTML문법의 class속성은 JSX내에서 className, onclick을 비롯한 갖가지 이벤트 관련된 속성은 onClick과 같이 이벤트 명 첫글자를 대문자로 바꿔서 표기한다.

 

 

 

이번장에서는 React에서 HTML코드를 랜더링 할때 일반적으로 사용하는 React의 JSX문법에 대해 알아봤습니다.

 

다음장에서는 React의 컴포넌트(Component)에 대해 알아보도록 하겠습니다.