[React] 버튼 클릭 이벤트로 버튼을 구분해서 값 변경하기

1. 기능 구현

• map 함수로 생성한 여러 버튼을 클릭 시 해당 버튼에 할당된 값만 증가하도록 구현한다.

 

2. 설명

• usestate와 map함수를 이용하여 구현했다.
• n번째 버튼 클릭 시 현재 n에 해당하는 값을 map함수의 증가하는 i값을 이용하여 count_test 함수에 전달
• n_count에 chic_count 데이터를 복사 후 n_count의 N 번째 데이터에 1을 더한다.
• setchic을 통해 변경된 데이터로 수정하면 해당 버튼의 데이터가 증가한다.

 

3. 작성 코드

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

function App() {

  let [logo,setLogo] = useState(["버튼1","버튼2","버튼3","버튼4"]);
  let [chic_count,setchic] = useState([0,0,0,0]);

  function count_test(i){
    let n_count = [...chic_count];
    n_count[i] = (n_count[i]+1);
    setchic(n_count);
  }



  return (
    <div className="App">
      <div className='black_nav'></div>
        {
        //map 함수 이용 a, 배열 데이터 , i 반복문 숫자 n
        logo.map(function(a,i){
            return (
              <div className='list' key={i}>
              <h4>{ a } <span onClick={()=>count_test(i)}>🍗</span> {chic_count[i]} </h4>
            </div>  
            )
          })
        }
    </div>   
  );
}