[React 톺아보기] 3. JSX란?

이번 포스팅에서는 JSX에 대해 다루겠습니다.

 

1. JSX란?

JSX란 JavaScript XML의 약자로 Javascript 확장 문법입니다.

React 개발 환경을 구축할 때 설치된 App.js, index.js파일을 보면 코드가 다음의 형태입니다.

//App.js

//import 부분
import React from 'react';
import logo from './logo.svg';
import './App.css';

//main 부분
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

HTML파일에서 사용하는 "태그"들과 Javascript에서 사용하는 "function"이 공존하는 것을 알 수 있는데, 이렇게 Javascript파일 안에서  HTML파일과 유사한 마크업 언어를 작성할 수 있게 해주는 문법을 JSX라고 합니다. 앞으로 보게 될 React 예제 코드는 이런 형태로 작성될 것입니다.

 

2. JSX의 특징

위의 App.js 파일에서 알 수 있듯이, JSX는 다음과 같은 특징이 있습니다.

• Javascript의 렌더링 로직과 마크업 언어의 UI 로직이 하나의 파일에서 연결된다.
• JSX는 엘리먼트 객체를 나타낸다.

JSX는 공식적으로 지원하는 문법이 아닙니다. 따라서 브라우저에서 실행되기 전, 코드 번들링 과정에서 babel 컴파일러가 JSX를 Jascript로 변환합니다.

JSX 변환 예시

//JSX
const element = (
	<h1 className="title">Hello World</h1>
    );
    
//바벨을 통해 변환된 Javascript 코드
const element = React.createElement(
	'h1',
    {className: "title"},
	'Hello World'
);

//JSX
function App() {
	return (
    	<h1>HEllo World</h1>
    );
}

//바벨을 통해 변환된 Javascript 코드
function App() {
	return React.createElement("h1", null, "Hello World");
}

 

3. JSX 문법

babel이 JSX를 Javascript형태로 변환하려면 반드시 규칙을 지켜야 합니다. 이 규칙들을 JSX문법이라고 합니다. JSX문법을 살펴볼까요?

1) React 라이브러리가 JSX코드와 같은 범위 내에 존재해야 한다.

import React from "react"

JSX는 React.createElement를 호출하는 코드로 컴파일되므로 JSX를 사용하려면 React 라이브러리가 존재해야 합니다.

 

2) 부모 요소 하나가 감싸야 한다.

function App() {
	return (
    	<h1>HEllo World</h1>
    );
}

위의 코드처럼 하나의 요소만 반환해야 합니다.

function App() {
	return (
    <div>
    	<h1>Hello World</h1>
        <h1>Hello React</h1>
    </div>
    );
}

만약 두 개 이상의 요소를 반환할 때에는 하나의 상위 요소로 감싸야 합니다.

 

3) 자바스크립트 표현식

function App() {
	const text = 'Hello World';
	return (
    	<h1>{text}</h1>
    );
}

JSX 내부에 자바스크립트 표현식을 넣을 때에는 { }안에 넣어야 합니다. 이를 데이터 바인딩이라고 합니다.

{ }안에는 변수, 표현식, 콜백함수 등 Javascript 표현식이 들어갈 수 있습니다.

 

4. style과 className

function App() {
  const text = 'Hello World';
  
  //React에서 style 속성 주기
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 20,
    padding: '1rem'
  }

  return (
    <>
      {/* 주석은 이런식으로 넣습니다. */}
      <div className="testBox">박스</div>
      <div style={style}>{name}</div>
    </>
  );

style 속성을 넣을 때 카멜 표기법을 사용합니다. 또한 CSS에서 요소에 접근할 때에는 className을 통해서 접근합니다.

 

다음 포스팅에서는 컴포넌트에 대해 다룰 것입니다.