리액트 : state 사용해서 좋아요 버튼 만들기

코드

import logo from "./logo.svg";

import "./App.css";

import { useState } from "react";

function App() {

  let post = "강남 맛집";

  let [글제목, b] = useState([

    "동탄 맛집 추천",

    "강남 맛집 추천",

    "리액트 강의 추천",

  ]);

  let [good, goodChange] = useState(0);

  return (

    <div className="App">

      <div className="black-nav">

        <h4>ReactBlog</h4>

      </div>

      <div className="list">

        <h4>

          {글제목[0]}{" "}

          <span

            onClick={() => {

              goodChange(good + 1);

            }}

          >

            🌝

          </span>{" "}

          {good}

        </h4>

        <p>7월 13일 발행</p>

      </div>

      <div className="list">

        <h4>{글제목[1]}</h4>

        <p>7월 13일 발행</p>

      </div>

      <div className="list">

        <h4>{글제목[2]}</h4>

        <p>7월 13일 발행</p>

      </div>

    </div>

  );

}

export default App;

 

 

 

 

 

1. onClick={함수 넣기}

 

 

 

onClick = { () => { } }

<span onClick={() => {  goodChange(good + 1) }}  >

            🌝
</span>

 

 

 

 

 

2. state 변경 함수로
state 변경하기

 

 

 

onClick = { () => { goodChange(good + 1) } }

let [good, goodChange] = useState(0);

 

 

 

 

 

결과물