JSX 기본규칙

1. 열린 태그는 반드시 닫아주어야 한다.

  - self-closing 가능

  - br이나 input 등 html5에서 닫힘을 사용하지 않는 태그도 닫아주어야 한다.

 

2. 2개 이상의 태그는 반드시 1개 이상의 태그로 감싸져야 한다.

 - <></> 로 사용해도 가능(fragment)

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

 - ()는 의미가 없지만 가독성을 위해서 사용한다.

 

3. 중괄호({})로 감싸면 변수를 꺼낼 수 있다.

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

출력 : react

 

4. 인라인 스타일을 넣어줄 때에는 객체로 선언 후 추가한다. 

function App() {
  const name = 'react';
  const style= {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : 24,
    padding : '1rem'
  }
  return (
      <>
        <Hello />
        <div style={style}>{name}</div>
      </>
  );
}

 

5. 클래스는 className으로 추가한다.

 

6. 주석은 중괄호로 감싼다.

function App() {
  return (
      <>
        {/* 어쩌고 저쩌고 */}
        <Hello 
        	//이런식으로 작성하는 주석은 화면에 보여지지 않습니다.
        />
        <div></div>
      </>
  );
}

export default App;