2. JSX

JavaScript xml

 

HTML 형태의 코드를 js 코드로 변환하기 위한 규칙 

- jsx에서는 태그를 닫지 않으면 오류가 발생 , 꼭 태그를 열었으면 닫아주어야 합니다.

 

- 두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸야 한다.
   div 태그로 감싸는 방법도 있지만, 스타일 중복이나 table 관련 태그가 번거롭기 때문에 React v16.2에 도입된 Fragment을 이용

   Fragement를 사용하게 되면 실제 DOM 자체는 생기지 않는다. (논리적 엘리먼트이기 때문에)

import React, { Component } from "react";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>My name is</h1>
        <b>jisu</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 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;

 

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;

- JSX에서 style과 className을 사용할 때 

  #styel변수로 사용할 경우 객체 형태로 생성

  #속성이름은 하이펀(-)형태로 camelcase로 바꾸어야한다
    (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;