[React] - State 배워보기

레이아웃 만들기

function App(){
 
  let posts = '게시물1';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>00월 00일 발행</p>
      </div>
    </div>
  )
}

(App.css)

div {
  box-sizing : border-box
}
.list {
  text-align : left;
  padding-left : 20px;
  border-bottom : 1px solid grey;
}

기초적인 레이아웃과 CSS를 적용하여 제작했습니다!

State 만드는 법

기존 자바스크립트의 방식처럼 let = 변수명 식으로 데이터를 저장할 수 있으나,
리액트에서는 변수가 아닌 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>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

<h4>{ post }</h4>

<h4>{ 글제목 }</h4>