[React] JSX의 기본 규칙

1. 꼭 닫혀야 하는 태그

태그를 열었으면 꼭, <div></div> 이렇게 닫아주어야 한다

 

 

2. 꼭 감싸져야 하는 태그

두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 한다

<div></div> , <></>(Fragment) 등

 

 

3. JSX 안에 자바스크립트 값 사용

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여준다

import React from 'react';
import Hello from './Hello';

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

 

 

4. style 사용

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    //background-color처럼 -로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

 

 

5. className

1) App.css

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

2) App,js

import React from 'react';
import './App.css'; //불러오기


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

export default App;

 

 

6. 주석

{/* 주석형태 */}

추가적으로, 열리는 태그 내부 :  // 주석