2. (REACT) Blog만들기 : JSX문법

처음 App.js 파일에서 중간 부분들은 지운 후 기본 상태에서 시작

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
           {/* 이 안에 jsx문법 사용하여 작성 */}
    </div>
  );
}

export default App;

JSX 란 ?
javascript파일에서 html을 쉽게 작성할 수 있게 도와주는 언어

JSX문법
1. class 대신 className 사용
2. 변수를 넣을땐 {중괄호 사용} => 데이터를 꽂아넣는다 ( 데이터 바인딩 )
3. style 넣을 땐 태그안에 style={{ 스타일명 : '값' }}

import logo from './logo.svg';
import './App.css';

function App() {

  let post = '대구 돈가스 맛집' // 서버에서 가져온 데이터라고 정의

  return (
    <div className="App">
      {/* 이 안에 html,css사용하여 작성 */}
      <div className="black-nav">
        <h4 id={post} style={{color:'yellow', fontSize:'20px'}}>블로그임</h4>
        {/* id="대구 돈가스 맛집" */}
      </div>
      <h4>{post}</h4> 
      {/* 대구 돈가스 맛집 */}
    </div>
  );
}

export default App;

JSX문법 사용하여 작성한 화면

 

※ 에러 메세지는 터미널/브라우저 또는 개발자도구로 확인합니다