React - 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3

(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=""이렇게 써야한다
왜냐하면 실은 App.js에 짜고있는건 html이 아니라 JSX라는 언어이기 때문이다

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

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그입니당</div>
        <div>여기에 저 변수에 있던거 꽂고 싶으면?</div>
      </div>
    </div>
  )
}

임시로post라는 변수를 만들어서 문자를 저장한다.
강남 우동 맛집 이라는 자료를 <div>안에 넣고 싶을 땐

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그입니당</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

-> 미리보기 화면에서 <div>강남 우동 맛집</div> 출력된다

이렇게 중괄호 안에 데이터바인딩하고싶은 변수명을 담으면 변수에 있던 자료를 html에 넣어서 보여줄 수 있다!

Q. 데이터바인딩이란?

변수에 있던 걸 html에 꽂아넣은 작업

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

<div style="color : blue">

이런걸 넣고 싶을 땐 JSX에서는 styl={} 안에 {} 자료형을 집어넣어야 한다

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

• {속성명 : '속성값'}
• font-size 처럼 속성명에 대쉬기호는 쓸 수 없음