데이터는

1. 변수에 넣거나
2. state에 넣거나

useState()라는 함수는 state를 하나 만들어주는 함수입니다.
이걸 이용하기 위해 위에import { useState } from 'react' 추가
상단에 첨부
리액트의 데이터 저장공간 state 만드는 법

state는
1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용해 만들어야함
데이터가 두개 남는다. [데이터1, 데이터2] 이렇게 생긴 array가 남음
destructuring 문법
var [name, age] = ['Kim', 20]
3. 문자,숫자, array, object 다 저장가능

let [글제목, 글제목변경] = useState('남자 코트 추천');
위처럼 사용하면 a와 b라는 변수가 생성되는데,
a라는 변수는 ‘남자 코트 추천’ 이라는 중요 데이터가 들어있는 state이며
b라는 변수는 ‘남자 코트 추천’이라는 데이터 변경을 도와주는 함수가 들어있습니다.

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

function App(){
 
  let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] );

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] }</h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

그냥 변수 쓰면 되지 왜 굳이 state를 만듭니까?
state 만의 장점이 있으니까!

✅ 웹이 App처럼 스무스하게 동작하게 만들고 싶으면
state에 데이터를 저장해야함.
글제목, 글 순서 등등이 변경될수 있다.
state로 만들어진 데이터가 바뀌면, 데이터를 담고 있는 HTML이 재랜더링됨

제목 정렬, 수정 등을 했을 때 새로고침 없이 페이지 재렌더링됨
= HTML이 새로고침 없이도 스무스하게 변경됨
정리) 자주 바뀌는, 중요한 데이터는 변수 말고

state에 저장해서 사용

바뀌지 않는 데이터들은 state로 굳이 저장할 필요 없습니다.
ex) 로고명