리액트 - State

리액트에서는 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>{a}</h4> 
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

위처럼 맨 윗줄에 import {useState} from 'react' 하고 컴포넌트 내에서 useState();를 통해 데이터를 저장할 수 있다.

" [a,b] = useState('남자 코트 추천'); " 과 같이 데이터를 저장했다면 {a}로 저장된 데이터를 사용할 수 있고 b('변경할 state 데이터');로 변경할 수 있다.

그렇다면 변수 대신 state를 사용하는 이유는 뭘까?

state는 변동사항이 생기면 state를 사용하는 html을 자동으로 리렌더링 해준다.

function App(){
  let [글제목, b] = useState('강남 우동 맛집');

  return (
    <h4>{ 글제목 }</h4>
  )
}

위의 코드에서 '강남 우동 맛집' 이 '강남 돈까스 맛집'으로 바뀐다면 아래의 {글제목}내용도 자동으로 바뀐다는 것이다. 그렇게 되면 UI 기능 개발도 매우 편리해진다.

즉 자주 변경될 것 같은 데이터들은 state에 저장하고 그렇지 않은 데이터들은 변수에 저장하거나 하드코딩 하면 된다.