[React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기

리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다.

[React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기

보다시피 div 태그안에 태그를 중첩해 세개를 생성했는데,

태그 하나를 생성할 때마다 메소드를 호출하는 것은 번거로운 일이다.

 

JSX - html을 JS로 변환

Babel · The compiler for next generation JavaScript

CDN방식으로 JSX를 사용하기 위해 해당 링크를 긁어온다.

긁어온 링크를 스크립트 태그에 소스를 걸어주면 JSX를 사용할 수 있다.

JSX를 사용해 태그를 생성하는 방법이다.

일일히 createElement를 할 필요없이 html처럼 태그를 작성하더라도

JSX가 html을 JS로 변환해주어 스크립트 태그안에서도 html태그문법을 사용할 수 있다.

또한 type을 text/javascript가 아닌 babel로 바꿔주길 바란다.

맞는 표현                                                                                                               틀린 표현

또한 JSX를 사용할 때 왼쪽처럼 하나의 태그안에 중첩해서 사용하는 건 가능하지만

오른쪽 처럼 하나의 태그가 닫히고 또 다른 형제 태그를 생성하는 것은 맞지않는다.

 

BootStrap이용해 태그에 스타일 주기

Bootstrap

부트스트랩을 CDN방식으로 사용하기 위해 링크를 가져온다.

긁어온 링크를 붙여넣으면 부트스트랩을 사용할 수 있다.

JSX를 사용하면 태그에 class대신 className으로 클래스를 명시해준다.

각 div에 클래스로 부트스트랩의 스타일을 줬다.

col-2,col-10에 의해 div가 컬럼,2대10비율로 스타일이 입혀졌다.