JSX로 HTML짜기

리액트도 html과 똑같이 div박스를 이용해서 코드를 짜주면 된다. 하지만 리액트도 js이기 때문에 class라는 예약어를 쓸 수 없어서 html에서 클래스를 줄 때 여기서 className을 이용한다.

<div className="black-background">

</div>

이런 식으로, 태그에 class를 부여한다.

 

그 다음, 리액트의 가장 큰 장점은 데이터 바인딩이 쉽다는 것이다. 예를 들면,

var data = "안녕하세요"

<div> {data} </div>

이런 식으로, data라는 변수명을 html에 넣으려면 { 변수명 } 이렇게 사용해주면 된다. 그리고 이 자리엔 함수명도 가능하다. { 함수이름() } 이렇게 넣으면 된다.  

 

그리고 이미지등을 가져오려면 상단에 import를 이용해서

import 이름 from '주소';

<img src={이름} />

이런 식으로, 이미지를 가져올 때 역시 { } 문법을 사용해서 가져온다.

 

마지막으로, style속성을 집어넣을 때 역시, 

<div style={ {color : 'blue', fontSize : '30px'} }>

이런 식으로, { }안에 object자료형으로 넣으면 된다.