jsx 문법

블로그의 레이아웃

상단메뉴부터 만들것임

html,css 써서 똑같이 만들면 된다. 다를 것 없다

박스 만들 때 div 쓰고 글자 적고 싶을 때 p 쓰고 하면된다

js에서도 html이 써지는데 이는 jsx라서 그런 것이다.(.js 파일에서 쓰는 html대용품 )

원래 리액트에서 만들려면 이렇게 써야 한다.

jsx 써서 쉽게 쓸 수 있게 만든 것

 

jsx 문법

문법1. class 넣을 땐 className 넣으면 된다.

똑같이 div 로 박스 생성하고 css 에 className명 넣어서 꾸며주면 된다.

원래 자바스크립트 코드 작성하는 공간이고 js 안에서 class쓰면 class를 선언해주세요 라는 문법이기 때문에 className써야한다.

 

(참고) css 파일 쓰려면 상단에서 import 'css파일 경로' 

import './App.css';

와 같이

문법2. 변수 넣을 땐 {중괄호}

서버에서 데이터를 가져와서 보여주고 싶음!

변수 하나를 만들어서 서버에서 가져 왔다고 가정

let post = '강남 우동 맛집'; //서버에서 받아온 블로그 글 제목을 어떻게 넣을 것인가?

 

이렇게 길게 해야지 post 라는 변수에 있는 것을 블로그 글 제목에 넣을 수 있었다(html에서)

jsx에서는 변수를 넣을 땐 {}를 써서 쉽게 할 수 있다

즉 변수있는 데이터를 html 사이에 꽃아 넣고 싶다! => {}쓰면 된다.(전문 용어로 데이터바인딩이라함. 데이터를 꽃아 넣는다)

id 나 className 명으로도 집어 널을 수 있다. 왠만한 곳 다 가능!!

 

문법3. css로 널어도 상관 없지만 style넣을 땐 style={} 써도된다.

<h4 style="color : red">

html에서는 이렇게 해도 됐다

jsx에서는 무조선 {}써서 작성

<h4 style={{color: 'red'}}>블로그지롱</h4>

 

style 넣을 땐 style ={{스타일명 : '값'}}

{{오브젝트 형식으로 넣어야 함}}

 

fontSize:'16px'

주의함점

font -size가 아니다 js -는 진짜 뺄셈을 말해서

카멜케이스도 적용사킨다

 

에러메세지는 터미널/브라우저에서 확인 또는 개발자 도구