Next.js
클릭시 JS 코드를 실행하고 싶다 : onClick={() => {}}
그런데 서버 컴포넌트일 때, 저렇게 사용한다면 오류가 발생! 'use client'로 클라이언트 컴포넌트로 만들어주고 해야된다!
- 이벤트 핸들러는 여러 종류가 있다!
onMouseOver이벤트
onDrag이벤트 등 굉장히 많은 종류의 핸들러가 있다.
state
장점
-
state가 변경되면 state를 쓰는 html 부분도 자동으로 재렌더링 된다.
-
state 변경은
state변경함수()를 써야한다.
바뀔 일이 없는 것은 state를 쓸 필요 없음! -
모든 상품 수량이 같은 것 : array를 활용?
array 복사 문법 :copy = [...수량]
copy = 수량으로 했을 경우, 해당 값을 가리키는 화살표를 복사해오는 것이기 때문에 copy와 수량이 같다. -
state 변경 함수를 사용할 때, 새 state와 기존 state가 같으면 변경X!!
그렇기 때문에[...수량]의 형태로 깊은 복사를 해줘야 한다.
- 깊은 복사 (Deep Copy)
깊은 복사는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조(메모리 내의 같은 값을 가리킴)를 공유하지 않는 복사를 뜻한다.
- 얕은 복사 (Shallow Copy)
얕은 복사는 복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킴)를 공유하는 복사를 뜻한다.
코드의 경우 다음과 같이 작성했다.
"use client";
import { useState } from "react";
export default function List() {
let 상품 = ["Tomatoes", "Pasta", "Coconut"];
let [수량, 수량변경] = useState([0, 0, 0]);
return (
<div>
<h4 className="title">상품 목록</h4>
{상품.map((이름, i) => {
return (
<div className="food" key={i}>
<img src={`/food${i}.png`} className="food-img" />
<h4>{이름} $40</h4>
<button
onClick={() => {
let copy = [...수량];
copy[i]--;
수량변경(copy);
}}
>
-
</button>
<span> {수량[i]} </span>
<button
onClick={() => {
let copy = [...수량];
copy[i]++;
수량변경(copy);
}}
>
+
</button>
</div>
);
})}
</div>
);
}