[React] 3. State

State : 리액트의 데이터 저장공간
쓰는 이유? html 자동으로 재렌더링 가능

자주 바뀌는 중요한 데이터는 state로 쓰자

import { useState } from "react";

state 사용하려면 우선 위와 같이 import해줌

// useState문법
let [a,b]=useState("남자 코트 추천");

a : 해당 state(남자 코드 추천)를 넣어줄 변수
b : 이 state를 변경할 수 있는 함수

현재 a라는 변수에는 "남자 코트 추천"이 들어가있다고 보면 된다

function App() {

  let [글제목, 글제목변경] = useState("남자 코트 추천");

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>
      <div className="list">
        <h3>{글제목}</h3>
        <p>1월 19일 발행</p>
        <hr />
      </div>
    </div>
  );
}

"남자 코트 추천"이라는 state가 '글제목'에 잘 들어가있다

state에 배열을 넣는것도 가능

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "코딩 잘하는 법",
    "부평 마라탕 맛집",
  ]);
return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>
      <div className="list">
        <h3>{글제목[0]}</h3>
        <p>1월 19일 발행</p>
        <hr />
        <h3>{글제목[1]}</h3>
        <p>1월 20일 발행</p>
        <hr />
        <h3>{글제목[2]}</h3>
        <p>1월 21일 발행</p>
        <hr />
      </div>
    </div>
  );
}

각각의 배열 인덱스 state에 접근 가능하다

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)