(React) 블로그 만들기 - 리액트의 state

일단 블로그에 보여질 글 목록 레이아웃을 만들어보자.

// App.js

function App(){
 
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>My blog</div>
      </div>
      <div className="list">
        <h4>{posts}</h4>
        <p>2022-07-14</p>
      </div>
    </div>
  )
}

/* App.css */

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

state란?

리액트에서 중요하거나 가변성이 있는 데이터는 일반 변수에 넣지 말고 state 를 만들어 담아준다.
state를 사용하기 위해 import {useState} from 'react'; 를 맨위에 추가해준다. 그리고 useState(기본값) 함수를 이용하여 변수와 변수를 수정하는 함수를 정의해준다. 여기서 자바스크립트의 Destructing 문법이 사용된다.

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

function App(){
 
  const [posts, setPosts] = useState([
    { title: "남자 코트 추천", date: "2022-07-21" },
    { title: "강남 우동 맛집", date: "2022-07-14" },
    { title: "서울 데이트 명소", date: "2022-07-10" },
  ]);
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>My blog</div>
      </div>
      <div className="list">
        <h4>{posts[0].title}</h4>
        <p>{posts[0].date}</p>
        <hr/>
      </div>
    </div>
  )
}

이런식으로 state에 배열 posts를 담아두고 꺼내 쓸 수 있다.
그렇다면 굳이 왜 변수 말고 state를 사용하는지? 를 이제야 말할 수 있다.

state 값이 변경되면 state 사용하는 html 부분도 재랜더링 해주기 때문 --> 첫번째 글에서 설명한 부드럽고 편리한 html을 구현 할 수 있다는게 포인트~