React | 레이아웃 JSX 문법

CSS는 className으로

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

export default App;

html에서는 클래스명을 부여할 때 'class'를 사용했지만, JSX에서는 className을 사용한다

데이터 바인딩

html에서의 { 변수 } 사용법

function App() {

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

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

export default App;

자바스크립트에서 선언한 변수를 html에서 사용하려면 { 중괄호 }를 사용한다
🔎 href, id, className, src 등 웬만한 곳에 다 사용 가능

style 속성은 object 자료형으로

function App() {

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

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

export default App;

{속성명: '속성값'}

이전에 html에서 css를 주지 않고 바로 style을 적용 시키려면, div 태그 안에

<div style='color: red;'>

를 넣어주었다
JSX에서도 비슷하지만, style={ } 내에 object 자료형을 넣어주어야 한다