[React] 좋아요 버튼, 갯수 UI 만들기( state변경함수 사용방법, array/object 자료형 state변경하는법→copy본을 수정)

1. onClick={함수}
2. state변경함수(새로운state)

내용 변경하는법

1. copy본 만들어서 변수에 저장
2. 바꾸고 싶은 부분에 수정할 내용 저장
3. state변경함수(변경할내용)

1. state 변수 만들기

let [state변수, **state변경함수**] = useState(초기값);

let [따봉, **따봉변경**] = useState(0);

→ 따봉변경 함수를 써야 재랜더링이 잘 됨

2. state 변수 사용 : { state변수 }

<div className="list">
        <h4>{글제목[0]} 
          <span> 👍 </span> **{ 따봉 }**
        </h4>
        <p>8월 16일 발행</p>
</div>

3. onClick={ 함수명 }

()=>{}

1. arrow function

onClick={()=>{}}

1. 일반적인 function

onClick={function(){}}

ex)

<span onClick={ **()=>{ }** }> 👍 </span>

💡 onClick={ } 안엔 함수이름을 넣어야함

4. state 변경 하는법 : state 변경함수 사용!!

→ state는 등호로 변경하지 못함

→ state변경함수를 사용해야함!!

→ state변경함수를 사용해야 재렌더링이 잘 됨

→ 함수에는 등호 못씀

**state변경함수(새로운state)**

<span onClick={ **()=>{ 따봉변경(따봉+1) }** }> 👍 </span>

[실습] 좋아요 버튼을 누르면 갯수가 하나씩 올라가는 코드

<h4>{ 글제목[0] } <span **onClick = { ()=>{ 따봉변경(따봉+1)} }**>👍🏻</span> **{ 따봉 }** </h4>

→ 원래는 따봉의 useState 초기값이 0이었으므로 0부터 시작.

→ 버튼을 onClick 누를때마다 0에서 1씩 증가

[코드]

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

function App() {

  let [글제목,b] = useState(['신촌 스시 맛집', '압구정 스시 맛집', '잠실 스시 맛집']);
  ***let [따봉, 따봉변경] = useState(0);***

  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>
      <div className="list">
        <h4>{글제목[0]}
        ***<span onClick={ ()=>{ 따봉변경(따봉+1) } }>👍</span>{ 따봉 }</h4>***
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;