JSX
(Javascript Syntax eXtension)
: React에서 html의 요소를 생성
- .js 파일에서 사용하는 html 대용품
CSS 파일 연결하기
- 상단에 import 추가
import './파일명';
class 설정하기
- className
<div className="black-nav">
변수에 있는 데이터를 html에 넣기
- { 변수명 }
- 데이터 바인딩
- id, class에도 사용 가능 ('작은 따옴표' 사용 X)
let post = '강남 우동 맛집'; // 서버에서 가져온 실제 데이터
<h4 id={post}>블로그</h4>
<h4>{ post }</h4>
style 속성 설정하기
- style={ { 스타일명 : '값', 스타일명 : '값 } }
- {중괄호} 안에 object 형식으로 사용
- font-size는 fontSize (뺄셈 (-) 사용 X)
<h4 id={post} style={ {color : 'white', fontSize : '19px'} }>블로그</h4>
출처
코딩애플