react로 블로그2, 2022-06-09

레이아웃

function App(){

  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>BLOG</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2022년 06월 09일</p>
      </div>
    </div>
  )
}
//App.css

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

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>
  )
}

맨 윗줄에 import {useState} from 'react' 하고

원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.

그리고 저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState('남자 코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다.

destructuring 문법

예를 들어서 ['Kim', 20] 이렇게 생긴 array 자료를 만들어놨는데 에서 Kim이랑 20이라는 자료를 각각 변수에 저장

let array = ['Kim', 20];

let name = array[0];
let age = array[1];
let [name, age] = ['Kim', 20]

변수 말고 state에 데이터 저장해서 쓰는 이유

이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다.

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해줍니다

참조 : 코딩애플 리액트 강의

https://codingapple.com/