JSX

JSX

1. JSX (JavaScript XML)

 - React와 같은 JavaScript 라이브러리를 위해 만들어진 확장 문법

 - JavaScript 코드 안에서 XML과 비슷한 형태의 마크업을 작성할 수 있음

 

2. JSX의 특징

 - JavaScript의 확장 문법이기 때문에, JavaScript 코드와 매우 유사

 - XML과 비슷한 구조를 가지고 있어, 태그들을 사용하여 컴포넌트를 정의 및 중첩 가능

 - JSX 조각을 별도의 변수로 분리 가능

 

3. 예시

 - NumberCounter.js

import React, { useState } from "react";

const NumberCounter = () => {
  const [no, setNo] = useState(0);
  
  // 별도의 변수로 분리
  const ingState = (
    <>
      <hr />
      <span>숫자 증가 중...</span>
    </>
  );

  return (
    <>
      숫자 : {no}
      <hr />
      <button onClick={() => setNo(no + 1)}>증가</button>
      {ingState}
    </>
  );
};

export default NumberCounter;

 

 - App. js

import NumberCounter from "./NumberCounter";

const App = () => {
  return (
    <>
      <NumberCounter />
    </>
  );
};

export default App;

 

 - 결과