[React] JSX 문법

문법1. className

JS의 class 속성(class 선언 등.)과 충돌이 일어나기 때문에, JSX에서 class 속성을 부여할 때는 className으로 해줘야함.

문법2. {}

Html 코드 사이에 js문법을 적용하고 싶을 때, {}로 감싸줘야함

• 예시

let post = '넣을 내용'

function App(){
	return(
    	<h4>{post}</h4>
    );
}	

id, className 등, 생각하는 모든 곳에 {}를 적용할 수 있음.

문법3. CSS적용

일반적인 방법

(App.js)
import './App.css';
~~
<div className="black-nav">
~~

(App.css)
.black-nav{
  display: flex;
  background-color: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

바로 적용

 <h4 style={{color : 'red',fontSize:'16px'}}> 블로그임 </h4>

font-size로 하면, js의 빼기 기호로 인식하기 때문에 fontSize로 카멜 표기법을 지켜 명시해줌.