[React] 리액트 JSX 규칙

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

JSX란?

JSX => JavaScript eXtension의 줄임말이며 말 그대로 자바스크립트의 확장 버전입니다.

JSX는 쉽게 말해서 HTML 문법을 JavaScript 코드 내부에 쓴 것을 의미하는데 아래와 같이 컴포넌트 파일에서 XML 형식으로 코드를 작성하면 babel이 JSX를 JavaScript로 변환시켜 줍니다.

return <div>Hello React!</div>;

Babel이란?

• 자바스크립트 문법 확장해주는 도구
• 아직 지원하지 않는 최신 문법을 정식 자바스크립트로 변환해준다.

 

 

JSX 규칙

1. 태그는 꼭 닫혀야 함

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

 

import "./App.css";
import Hello from "./components/Hello";

function App() {
  return (
    <div>
      <Hello></Hello>
      <input>
    </div>
  );
}

export default App;

HTML에서는 input 태그나 br태그를 닫지 않고 사용이 가능하지만 리액트에서는 꼭 태그를 닫아주어야 합니다.

 

2. 두 개 이상의 태그가 존재한다면 꼭 하나의 태그로 감싸 져야 한다

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

return() 부분에서 두 개 이상의 태그는 아래의 코드와 같이 무조건 하나의 태그로 감싸 져있어야 합니다.

 

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

하지만 불필요한 div태그는 복잡도를 높일 수 있기 때문에 리액트의 Fragment라는 것을 사용해주면 됩니다.

import "./App.css";
import Hello from "./components/Hello";

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

export default App;

 

Fragment란?

• 단순히 감싸기 용으로 태그를 이용해야 할 때 사용
• 형태 : <> </>

 

3. Javascript 값 사용할 때에는 { }를 사용

import "./App.css";
import Hello from "./components/Hello";

function App() {
  const name = "react";
  return (
    <>
      <Hello></Hello>
      <div>{name}</div>
    </>
  );
}

export default App;

JSX 내부에서 자바스크립트 변수를 보여줄 때는 { }으로 감싸서 보여줄 수 있습니다.

 

4. style과 className 

JSX에서 css를 설정하는 방법은 HTML에서 css를 설정하는 방법과 살짝 다릅니다.

App.js

import "./App.css";
import Hello from "./components/Hello";

function App() {
  const name = "cocoon";
  const id = "5";
  const style = {
    color: "skyblue",
    fontSize: "25px",
  };
  return (
    <>
      <Hello></Hello>
      <div style={style}>{name}</div>
      <div style={{ color: "red", fontSize: "15px" }}>{id}</div>
    </>
  );
}

export default App;

인라인 스타일의 경우 font-size나 background-color와 같이 -로 구분되어 있는 이름은 fontSize, backgroundColor와 같이 camleCase형태로 작성해주어야 합니다.

 

그리고 CSS class를 설정할 때는 'class='가 아닌 'className='으로 설정해주어야 합니다.

App.css

.test-box {
  background: gray;
  width: 100px;
  height: 100px;
}

App.js

import "./App.css";
import Hello from "./components/Hello";

function App() {
  return (
    <>
      <Hello></Hello>
      <div className="test-box"></div>
    </>
  );
}

export default App;

 

5. 주석

import "./App.css";
import Hello from "./components/Hello";

function App() {
  return (
    <>
      <Hello></Hello>
      {/* 주석은 화면에 보이지 않습니다. */}
      /*중괄호로 감싸지 않으면 화면에 표시됩니다.*/
    </>
  );
}

export default App;

 

 

 

 

📚 참고

https://react.vlpt.us/basic/04-jsx.html