React JSX 문법

App.js
App.js가 메인페이지! 이미 채워져있던 html들은 지우고 div 하나만 남기기!

import ~~~

function App(){
  return (
    <div className="App">
      //다 지우기
    </div>
  )
}

nav 제작

(App.js)

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

(App.css)

.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

JSX 문법 1. html에 class 넣을 땐 className

평소에 짜던 html/css와 다른 부분이 있다.
스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓴다.

원래 리액트환경에서 <div> 하나 만들고 싶으면 자바스크립트로 React.createElement('div', null) 코드를 짜야한다.
너무 코드가 길어짐에 JSX라는 언어를 대신 사용 JSX는 html과 사용방식은 비슷하다

근데 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하면 안된다.

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}

> 자바스크립트 변수같은 곳에 있던 자료를 html 중간에 꽂아서 보여주고 싶을 때가 많았는데 가능하다는점!

function App(){
  let post = '맛집';
  var data = 'ramen';
  return (
    <div className="App">
      <div className="black-nav">
        <div>맛집 블로그</div>
        <div className={data}>변수를 넣고 싶다면?</div>
        <div>{ post }</div>
        <div className={data}>블라블라</div>
      </div>
    </div>
  )
}

{} 중괄호를 열어서 변수들을 넣을 수 있다.
href, id, className, src 등 여러가지 html 속성들에도 가능
위처럼 data변수에 'ramen'를 담아 <div className={data}> = <div className="ramen">
변수에 있던걸 html에 넣는 작업을 데이터바인딩이라 한다.

JSX 문법 3. html에 style속성 넣고싶으면

JSX 상에서는 style={ } 안에 { } 자료형으로.

 <div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

• { 속성명 : '속성값' } 이렇게 넣어주기
• 근데 font-size 처럼 속성명에 대쉬기호 못씀
• 대쉬기호 대신 모든 단어를 붙여쓰기. 붙여쓸 땐 앞글자를 대문자(camel)로 치환