JSX 문법

JSX 문법 

1. class 넣을 땐 className 사용

2. 변수 넣을 땐 {변수명} 중괄호 사용 ( 데이터바인딩 (데이터를 꽂아넣는다) )

ㄴ className , id 등 모든 곳에서 {변수명} 을 적용할 수 있다.

function App() {

  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={post}>블로그임</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

export default App;

 

위 코드를 적용하면 개발자도구 에서는 아래와 같이 나온다.

 

3. 스타일 넣을 때는 { 무엇을 : '어떻게' } 이렇게 오브젝트 형식으로 사용

function App() {

  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color : 'red', fontSize : '16px'}}>블로그임</h4>
      </div>
      <h4>{post}</h4>
    </div>

원래라면 css에서 글자크기는 font-size : 16px  이렇게 지정을 할 것이다.

리액트 에서는 - 가 사라지고 대신 다음 단어의 첫 글자가 대문자로 사용해야한다.(카멜케이스)

css : font-size : 16px  --->  react : fontSize : '16px'

 

4. return() 안에서는 병렬로 태그2개 이상 기입 금지

이렇게 에러가 나기 때문에 return 안에 컨테이너식으로 하나 씌우고 병렬을 하던지 해야됨~~~