하나의 useState 이용한 숫자변경. (각자따로.)

 

'use client'
/* eslint-disable @next/next/no-img-element */
import Image from "next/image"
import food from '/public/food0.png'
import { useState } from 'react';

const List = () => {
    let itemCoo = ['Tomatoes', 'Pasta', 'Coconut', '김치찌게'];
    const [itemNum, setItemNum] = useState<Record<number, number>>({});
  
    const increaseItemNum = (index: number) => {
      setItemNum((prevItemNum) => ({
        ...prevItemNum, // 스테이값을 전체 복사. 현재 ({0,0,0,0})
        // prevItemNum 는 스테이트 객체안의 모든값.
        [index]: prevItemNum[index] ? prevItemNum[index] + 1 : 1,
        //[index] {} 객체의 몇번재값  
      }));
    };
  
    const decreaseItemNum = (index: number) => {
      setItemNum((prevItemNum) => ({
        ...prevItemNum,
        [index]: prevItemNum[index] > 0 ? prevItemNum[index] - 1 : 0,
      }));
    };
  
    return (
      <div>
        <h4 className='title'>상품목록</h4>
        {itemCoo.map((item, i) => (
          <div className='food' key={i}>
            <img src={`/food${i}.png`} alt='음식' className='food-img' />
            <h4>{item} 40$</h4>
            <span>{itemNum[i] || 0}</span>
            <button onClick={() => increaseItemNum(i)}> + </button>
            <button onClick={() => decreaseItemNum(i)}> - </button>
          </div>
        ))}
      </div>
    );
  };
  

export default List;

검색이나 챗 gpt 한테 물어보는것도 좋다.

prevItemNum 값은 현재 useState의 {} 전체 숫자값.

      [index]: prevItemNum[index] ? prevItemNum[index] + 1 : 1,

설명 현재 index 는 스테이트의 {0,0,0,0} 숫자의 위치값? (아직 이해가 좀더필요)

prevItemNum[index] 는 useState 의 객체 여러개의 숫자값중에 변경할 숫자값 한개의 위치를 말한다.