[문법]JSX

 앞서 계속 언급했던 jsx(javascript xml)를 알아보겠습니다.

컴포넌트를 만들 때 React.createElement() 함수를 사용해서 만들게 되면 다음과 같이 상당히 고통받게 됩니다.

"use strict";
 
React.createElement(
  "div",
  { className: "App" },
  React.createElement(
    "header",
    { className: "App-header" },
    React.createElement("img", { src: logo, className: "App-logo", alt: "logo" }),
    React.createElement(
      "p",
      null,
      "Edit ",
      React.createElement(
        "code",
        null,
        "src/App.js"
      ),
      " and save to reload."
    ),
    React.createElement(
      "a",
      {
        className: "App-link",
        href: "https://reactjs.org",
        target: "_blank",
        rel: "noopener noreferrer"
      },
      "Learn React"
    )
  )
);

 React 개발을 쉽게 하기 위해 HTML과 비슷한 문법으로 코드를 작성하면 이를 React.createElement() 함수를 사용하는 javascript 형태로 변환해 줍니다. HTML 형태의 코드를 javascript 코드로 변환하기 위해서 몇 가지 규칙을 준수해야 합니다.

 - 기존에 HTML 코드에서 input이나 br 태그를 사용할 때 태그를 닫지 않아도 적용이 되긴 합니다. 하지만 jsx에서는 태그를 닫지 않으면 문법적 오류가 발생합니다. 때문에 꼭 태그를 열었으면 닫아주어야 합니다.

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <input type="text">
    );
  }
}
 
export default App;

 

- 두 개 이상의 엘리멘트는 반드시 하나의 엘리멘트로 감싸야 합니다. 이런 경우에도 오류가 발생합니다. 가장 간단한 방법으로는 div 태그로 감싸는 방법이 있지만, 스타일 중복이나 table 관련 태그의 번거로운 작업을 피하기 위해 React v16.2에 도입된 Fragment를 이용해도 됩니다. Fragment를 사용하게 되면 실제 DOM 자체는 생기지 않는걸보니 논리적인 엘리멘트인 듯 합니다. div 태그를 이용할 경우 실제 DOM에 div가 생깁니다.

import React, { Component } from "react";
 
class App extends Component {
  render() {
    return (
      <h1>My name is</h1>
      <b>Kani</b>
    );
  }
}
 
export default App;

import React, { Component } from "react";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>My name is</h1>
        <b>Kani</b>
      </React.Fragment>
    );
  }
}
 
export default App;

 - jsx 내부에서 javascript의 변수나 함수를 사용하기 위해서는 {}를 사용하면 됩니다.

import React, { Component } from "react";
 
class App extends Component {
  render() {
    const color = "black";
 
    return <h1>Color is {color}</h1>;
  }
}
 
export default App;

 - jsx 내부에서 조건문을 사용할 경우 삼항연산자(조건? 참: 거짓)나 AND 연산자(조건 && 참)을 이용해야 합니다. if문은 기본적으로 사용할 수 없고, 사용하려면 IIFE(즉시 실행 함수 표현)을 사용해야 합니다.

import React, { Component } from "react";
 
class App extends Component {
  render() {
    const color = "white";
    const lib = "react";
 
    return (
      <React.Fragment>
        {color === "black" ? <h1>검정색</h1> : <h1>다른색</h1>}
        {lib === "react" && <h2>리액트</h2>}
      </React.Fragment>
    );
  }
}
 
export default App;

import React, { Component } from "react";
 
class App extends Component {
  render() {
    const lib = "react";
 
    return (
      <React.Fragment>
        {/* IIFE(즉시 실행 함수) 사용 */}
        {(() => {
          if (lib === "angular") return <h1>Angular</h1>;
          if (lib === "react") return <h1>React</h1>;
          if (lib === "vue") return <h1>Vue</h1>;
        })()}
      </React.Fragment>
    );
  }
}
 
export default App;

 - jsx에서 style과 className을 사용할 때는 다음과 같이 사용합니다. style을 변수로 사용할 경우 객체형태로 만들어야하며, 속성이름은 하이펀(-) 형태를 camelcase로 바꾸어 주어야 합니다. (ex: background-color -> backgroundColor) 또한 class 대신에 className을 사용합니다.

// App.css 수정

.App {
  background-color: black;
  color: magenta;
  font-size: 24px;
  font-weight: bold;
  padding: 15px;
}

import React, { Component } from "react";
import "./App.css";
 
class App extends Component {
  render() {
    const style = {
      backgroundColor: "cyan",
      color: "white",
      textDecoration: "underline"
    };
 
    return (
      <div className="App">
        <span>My Name is </span>
        <span style={style}>Kani</span>
      </div>
    );
  }
}
 
export default App;

 - jsx에서 주석은 {/* ... */}와 태그 내의 //를 이용합니다.

import React, { Component } from "react";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        {/* Block Comment */}
 
        <h1 // Tag Comment
        >
          주석
        </h1>
      </React.Fragment>
    );
  }
}
 
export default App;

References

[Velopert 블로그 JSX] https://velopert.com/3626

[React 공식 Docs] https://reactjs.org/docs