export default function List(){
let prods = ['Tomatoes', 'Pasta', 'Coconut']
return(
<div>
<h4 className="title">목록</h4>
{
prods.map((a,i)=>{
let [quentity, change] = useState(0)
return (
<div className='food' key={i}>
< img src={`/food${i}.png`} className='food-img'/>
<h4>{a} $40</h4>
<button onClick={()=>{ change(quentity-1) }}>-</button>
<span>{quentity}</span>
<button onClick={()=>{ change(quentity+1) } }>+</button>
</div>)
})
}
</div>
)
}
이렇게 map함수 안에다 useState선언해도 개별적으로 잘 동작하던데 이래도 각각의 상품 안에 state가 있는것이지않습니까?
이렇게 하면 이제 map 밖에서는 각각의 state 안에 접근할 방법이 있을까요? 그리고 이렇게 쓰면 별로 좋지 못한 방법일까요?
