React JSX

react의 컴포넌트를 만드는데 유용한 문법이다.

 

태그를 사용하든 component를 사용가능하다.

 

import MyHeader from './MyHeader.js'

를 하였다면

 

<MyHeader />

를 사용할 수 있다.

 

1. 닫침 규칙

<img > </img>

반드시 모든 태그를 닫아줘야한다.

<img /> 로 열자마자 닫을수 있다. (self closing)

2. 반환은 반드시 하나의 부모를 가져야한다.

반드시 최상위 태그로 묶어서 보내줘야한다.

없이 보내고 싶다면

 

import React  from "react";

<React.Fragment>

 

</React.Fragment>

로 감싸줄수 있다. 혹은

<>

</>

도 가능하다.

 

inline style 방식

const style = {

     App:{

          backgruondColor : "black"

     }

}

 

<div style = {style.App}> </div>

를 통해 내부에서도 style을 만들어서 사용가능하다.