React

import './App.css';

function App() {
  
  let post = '강남 우동 맛집';

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

export default App;

아이디나, 클래스나, 태그안에 데이터를 집어넣을때 중괄호 문법을 사용하는데
이것을 데이터 바인딩이라고 한다.

Style

style 넣을땐 style={{스타일명:'값}}
예로들어 font-size 의 경우 마이너스(-)기호는 진짜로 뺄셈을 말하기때문에
카멜형식으로 사용한다 / fontSize

주의사항

return()안에는 병렬로 태그 2개 이상 기입금지

기존 자바스크립트 변수선언 var, let, const 를 사용할 수 있지만
자료를 잠깐 저장할때에 'state'를 써도 된다.

import { useState } from 'react';
import './App.css'

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

상단에

import { useState } from 'react';

요렇게 생기는데, 요 아이를 보는 순간 예전 기억이 떠올랐다.
리액트에서 퍼블리싱작업을 할 때 컴포넌트나 이미지를 저렇게 사용한 적이 있었다.