JSX의 기본 규칙

1. 꼭 닫혀야 하는 태그

Input 태그 등 기존에 닫지 않아도 되는 태그를 반드시 닫아 주어야함
또는 태그와 태그 사이에 내용이 들어가 않을 때에는 <input /> 처럼 닫아 준다.
이를 Self Closing 태그라 한다.

2. 꼭 감싸져야하는 태그

모든 JSX 는 각각의 하나의 태그로 감싸져 있어야합니다. 부모가 하나라는 얘기다.
하지만 단순히 감싸기 위하여 불필요한 <div>같은 태그로 감싸는게 필요 없을 경우에는
Flagment(빈 태그)라는 것을 사용한다. <> 내용 </> 와 같이 빈 태그로 감싸주면 불필요한 박스를 없앨 수 있다.

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

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

4. CSS의 표현

-(dash)는 표현 할 수 없다 그렇기 때문에 camelCase 형태로 네이밍 해주어야 한다.
background-color=> x , backgroundColor => o
인라인 스타일로 css를 적용할 경우 객체 형태 로 작성 해야한다.
기본 단위는 px 이며 다른 다위사용시 문자열 로 작성 해야한다.

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

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

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

export default App;