JSX 규칙

babeljs.io를 통해서 확인하면

React 안에는 createElement라는 함수가 있고 , 이를 통해서 컴포넌트를 만든다. 

 

JSX 문법을 사용해서 xml 형태로 선언을 하면 babel이 위의 내용을 실행해준다. 

 

 

JSX 규칙

1. 태그는 무조건 닫혀있어야한다. 

input 같이 원래 닫지 않아도 됐던 엘리먼트도 셀프 클로징을 해줘야한다.

<div></div>  // <div> 입력시 오류
<input />	// <input> 입력시 오류

 

 

2. 두개 이상의 태그는 하나의 태그로 감싸져야 한다. 

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

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요.</div>
    </div>
  );
}

export default App;

<div>대신에 <>로 대체 가능하다. 

<div>는 브라우저에서 확인이 가능하지만 <>는 확인이 안된다. 

불필요한 <div>사용이 안되게끔

 

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

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요.</div>
    </>
  );
}

export default App;

 

 

3. jsx 내부에서 자바스크립트 값 보여주기

변수를 선언하고, 중괄호 안에다가 변수를 넣어준다. 

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

function App() {
  const name = 'react';

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

export default App;

 

 

4. jsx 내부에서 style 적용 방법

자바스크립트로 선언 후 적용 

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

function App() {
  const style = {
    backgroundColor : 'black',
    color: 'aqua',
    fontsize : 24, 
    padding : '1rem'
  };

  return (
    <>
      <Hello />
      <div style = {style}>스타일 적용예제</div>
    </>
  );
}

export default App;

 

 

5. jsx 내부에서 class 스타일 적용 방법 

html에서 사용하던 class가 아닌 , className을 통해서 사용한다. 

class로도 적용이 가능하지만 경고가 뜨게 된다. 

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

function App() {
  return (
    <>
      <Hello />
      <div style = {style}>{name}</div>
      <div className = "gray-box"></div>
      <div class ="gray-box"></div> //경고가 뜬다
    </>
  );
}

export default App;

 

 

6. 주석 사용방법 

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

function App() {
  return (
    <>
      {/* 주석은 이렇게 */}
      <Hello 
        // 이렇게 또 주석을
      />
      <div className = "gray-box"></div>
    </>
  );
}

export default App;