React 레이아웃 만들 때 사용하는 JSX문법 3가지

1. html과 동일하게 작성 할 수 있지만 class 설정시 className 를 사용한다.

2. 변수를 만들어서 사용 할 수 있다. 변수를 사용 할땐 {} 를 이용해서 변수명을 입력한다.

import './App.css';

function App() {

  let post = '강남 우동 맛집'; //변수생성
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <h4>블로그 글 제목</h4>
      <p>{post}</p> // 변수 삽입
    </div>
  );
}

export default App;

3. html에 직접 style속성을 넣을 수 도 있는데 style = {} 형식에 {} 자료형으로 입력하고 font-size 같이 " - " 기호나 띄어쓰기한 스타일은 fontSize, backgroundColor 과같이 카멜표기법으로 입력한다.

import './App.css';

function App() {

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <h4>블로그 글 제목</h4>
      <p style={{fontSize : '20px', backgroundColor : 'blue'}}>{post}</p>
    </div>
  );
}

export default App;