[React] JSX를 사용하며, 기존 사용방법과 다른 점

1. 태그는 꼭 닫혀야 한다. 

<div> </div>

<Hello />

 

2. 두개 이상의 태그는 감싸주어야한다.

어떤 HTML 태그로 감싸고 싶지 않다면 Fragment로 감싸주기

Fragement 란 빈 태그

<>

</>

 

3. javascript 값을 JSX 내부에서 보여줄 떈, 중괄호로 감싸서 보여주기

const value = "안녕"

return <div>출력 테스트  {value} </div>

 

4. JSX 내부에서 style을 사용할 떈 객체 형태로 넣어주기

- style에서 background-color 와 같이 -로 연결되는 아이들은 Camel Case인 backgroundColor로 바꾸어 써준다.

- 외부 css class를 쓸 떈 class가 아닌 className을 사용한다.

const style = {

  backgroundColor : 'gray'

  color : "yellow"

}

return (

  <div style = {style}>

    <div className="my-style">

    </div>

  </div>

)

 

<코드>

import React from 'react'; import Hello from './Hello'; import './App.css';   function App() {   const name = 'react';   const style = {     backgroundColor : 'black',     color : 'aqua',     fontSize : 24,     padding : 'lrem'   };     return (     <>       <Hello         //주석입니다.       />       <div style = {style} >         {name}       </div>       <div className="gray-box"></div>     </>   ); }   export default App;

style 적용 확인

 

5. 주석

return (

 <div>

    {/*중괄호로 감싸주기.*/}

    <input

      //이렇게 써주어도 된다.

    />

 </div>

)