[React] useState

State에 데이터 담기

리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다!

여기서 자주 변경될 것들은 state에 저장하면 됩니다
글제목과 좋아요수는 자주 변경되니 state에 저장합니다

---

✍️ 코드

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

function App() {

  let [ 글제목 ] = useState('여자 코트 추천')  
  let [ 좋아요, 좋아요변경 ] = useState(0)

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style = { {fontSize : '25px'} }>BLOG</h4>
      </div>
      <div className="list">
        <h4>{ 글제목 } <span> 💗 </span>{좋아요}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

1. 맨 윗줄에 import {useState} from 'react' 적기
2. useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있음
3. [작명, 함수] = useState('보관할 자료') 이렇게 씀

---

좋아요 버튼 기능 개발

onClick 사용법

💗 클릭 시 좋아요 state를 1씩 증가시키려면 onClick 이용해야 합니다! 리액트에서는 일반 html과 다르게 JSX 문법을 사용합니다

<div onclick="실행할 자바스크립트">

일반 html 파일

<div onClick={실행할함수}>

JSX 문법

1. Click이 대문자임
2. {} 중괄호 사용함
3. 그냥 코드가 아니라 함수를 넣어야 잘 동작함
   
   

state 변경

let [ 좋아요, 좋아요변경 ] = useState(0); 

state 만들 때 2개까지 작명할 수 있습니다!
두 번째 작명한 것은 state 변경을 도와주는 함수입니다

사용법은

좋아요변경(새로운state) 

state 변경 함수는 ( ) 안에 넣은 걸로 state를 바꿔주는 함수라서..!
좋아요변경(1)이라고 사용하면 좋아요라는 state가 1로 변경됩니다
좋아요변경(100)이라고 사용하면 좋아요라는 state가 100으로 변경됩니다

✍️ 코드

function App(){
  
  let [ 좋아요, 좋아요변경 ] = useState(0)
  return (
    <h4>{ 글제목 } <span onClick={() => 좋아요변경(좋아요+1)}> 💗 </span>{좋아요} </h4>
  )
}

💗 클릭 시 숫자가 변경됩니다 :)

---

왜 변수 말고 state에 데이터 저장하나요?

state도 용도는 그냥 변수랑 똑같습니다! 자료 잠깐 보관하는 게 끝인데 그럼 왜 변수를 안 쓰고 state를 쓰는 건가요?

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

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

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

여기서 갑자기 state에 있는 '강남 우동 맛집' -> '강남 삼겹살 맛집' 이렇게 바꿀 경우! 변수로 선언 했으면..html에 변경사항 반영되게 코드 짜야 합니다! 하지만... state 자료는 자동으로 html이 바뀝니다 :) state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줘서 그렇습니다!

---