레이아웃 만들기

상단 nav 바

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

• 평소에는 class=" "로 짜지만 JSX 문법에서는 className=" "짜야됨
• 원래는 React.createElement('div', null) 이렇게 어렵게 짬

(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 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호} -> 데이터 바인딩

• 위에 변수를 하나 만들어놓고 문자를 저장해둔다.
• <div>안에 넣고싶다면 { 만들어논 변수 }로 코딩해주면 된다.
• 원래대로라면 document.getElementById().innerHTML=?? 이런 식

function App(){

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

• 온갖 곳에 데이터 바인딩이 가능함
  • href, id, className, src 등 여러가지 html 속성들에도 가능하다.

function App(){

  var data = 'red';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}

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

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

• JSX 상에서는 style={} 안에 {} 자료형으로 집어넣어야됨.
• {속성명 : '속성값' } 이렇게 넣어야 됨.
• font-size처럼 속성명에 대쉬 기호 X
  • 대쉬 기호 대신 모든 단어를 붙여써야됨. 붙여쓸 땐 앞글지라르 대문자 치환