[React] JSX

1. JSX 개요

1.1 JSX의 개념

① JSX(JavaScript + XML)란 JavaScript를 확장한 문법이다.

② JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이다.

아래와 같이 retrun 문 안에 JSX를 작성할 수 있다.

// import [패키지명] from [경로]
import React from "react";
// js 파일 뿐 아니라 이미지도 가능
import logo from "./logo.svg";
// css 가능
import "./App.css";

function App() {
  return (
    // JSX문 작성 가능
    <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;

리액트는 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.

1.2 JSX의 등장 배경

아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.

<div>
  <h1>안녕하세요!</h1>
</div>

그래서 나온 게 JSX이다.

js 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다!

const hello = (
  <div>
    <h1>안녕하세요!</h1>
  </div>
);

1.3 JSX 사용하기

JSX를 사용하기 위한 몇 가지 규칙이 있다.

App.js에서 실습해보자

① 태그는 꼭 닫아줘야한다.

• 에러

  import React from "react";
  import logo from "./logo.svg";
  import "./App.css";
  
  function App() {
  return (
      <div className="App">
      <input type="text">
      </div>
  );
  }
  
  export default App;
  

• 정상 출력

  function App() {
    return (
      <div className="App">
        <input type="text" />
      </div>
    );
  }
  

② 무조건 1개의 엘리먼트를 반환해야한다.

• 에러

  function App() {
      return (
      <p>안녕하세요!</p>
  
      <div className="App">
      <input type='text'/>
      </div>
  );
  }
  

• 정상 출력

  function App() {
    return (
      <div className="App">
        <p>안녕하세요!</p>
        <input type="text" />
      </div>
    );
  }
  

③ JSX에서 javascript 값을 가져오려면 중괄호를 쓴다.

function App() {
  const cat_name = "perl";
  return <div>hello {cat_name}!</div>;
}

import React from "react";

import "./App.css";

export default function App() {
  const name = "시은";
  return <div>안녕하세요! {name}입니다.</div>;
}

값을 가져올 때 뿐만 아니라 map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요!</p>
      {/* 삼항 연산자 사용 */}
      <p>
        {number > 10 ? number + "은 10보다 크다" : number + "은 10보다 작다"}
      </p>
    </div>
  );
}

export default App;

④ class 대신 className!

• JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 class가 아닌 className으로 사용한다.
• id는 그냥 id이다.

<div className="App">

⑤ 인라인으로 style 주기

html 태그에 스타일을 넣기 위해 css 문법 대신 json 형식으로 넣어주면 된다.

• HTML 일 땐 아래와 같이 썼다면,

  <p style="color: orange; font-size: 20px;">orange</p>
  

  
  

• JSX일 땐 아래와 같이 써주면 된다.

// 중괄호를 두 번 쓰는 이유는 객체도 js이기 때문이다.
// 이렇게 쓰거나,
<p style={{ color: "orange", fontSize: "20px" }}>orange</p>;

//혹은 스타일 객체를 변수로 만들고 쓸 수 있다.
function App() {
  const styles = {
    color: "orange",
    fontSize: "20px",
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}