[React] 2강 | JSX 문법은 3개가 다임

문법1. className

---

제목 배경 검은색

• App.jsx

    import './App.css'
  
    function App() {
        const [count, setCount] = useState(0)
  
        return (
            <div className="App">
            <div className="black-nav">
                <h4>Myblog</h4>
            </div>
            </div>
        )
    }
  

• App.css

    .black-nav {
    display: flex;
    background: black;
    width: 100%;
    color: white;
    padding-left: 20px;
    }
  

문법2. 변수를 html에 꽂아넣기 (변수넣을 땐 {중괄호})

---

= 데이터바인딩

블로그 글 제목

• App.jsx

    let post = '블로그 글 제목';
  
    return (
        <div className="App">
        <div className="black-nav">
            <h4>MyBlog</h4>
        </div>
        <h4>{ post }</h4>
        </div>
    )
  

문법3. style 넣을 땐 style={}

---

글씨를 빨갛게

• App.jsx

    return (
        <div className="App">
        <div className="black-nav">
          <h4 style=>MyBlog</h4>
        </div>
        <h4>{ post }</h4>
        </div>
    )