[React] React에서 마크업을 편하게 해주는 JSX 사용법

#0. JSX?

- 리액트 환경에서 html형태로 마크업 할 수 있도록 도와주는 언어 JSX

 

- 리액트 프로젝트를 시작하면 app.js와 같이 js 파일에 HTML형태로 마크업을 한다.

- js 에 작성을 하면, 해당 플젝 미리보기시, html 에 작성한것과 같이 표현이 되는데,

- 여기 app.js의 return안의 코드들은 JSX다. 걍 HTML 처럼 쓸수있도록 도와주는 녀석들이군 생각하면 된다.

- 그런데 HTML 과 몇가지 차이점이 있으니 기억할것.

app.js 에서 요롷게 작성하면

 

이런 결과물 나옴

 

#1. class 넣을땐 className

+ css 파일 쓰려면 상단에서 import 'css파일경로'

 

 

#2. 변수 넣을땐 (데이터 바인딩은) {중괄호} 모양으로

- let post를 JSX에 넣고싶으면,

- 넣고자하는 영역에서 {post}형태로 넣어주면 그대로 출력된다.

출력결과 post가 잘 출력되었다.

 

#3. 인라인 style 넣을 땐 style{{스타일명:'값'}}

- font-style 같이 램형태는 fontSize와 같이 카멜케이스로 넣어줘야함.