리액트 레이아웃 JSX 문법 3가지

1. className

기존 html은 클래스를 선언하는 문법이 class였으나 JSX에서는 className으로 선언

function App() {
    return (
        <div className="App">
            <div className="black-nav">
      		</div>
        </div>
    );
}

2. 변수를 넣을 땐 중괄호

태그의 속성이나 변수를 넣고싶을 땐 중괄호({})를 사용.
중괄호안에 데이터바인딩을 하고싶은 변수만 담아주면 끝
id나 className 등 여러가지 html 속성에도 삽입이 가능

function App(){

  let post = '여기에 넣어봅시다.';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

3. html의 style 태그

기존 html의 스타일 태그는 style="color:blue" 이런식으로 입력을 했지만
JSX에서는 아래와 같이 입력한다.

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

여기서도 html과 다른부분은 font-size -> fontSize로 변경되었다.
물론 기존 html 문법과 동일하게 css에 지정도 가능하다.