[Next.js] 숫자 증가 버튼 만들기

상품 목록 페이지에서 플러스 버튼을 누르면 주문 수량이 1씩 증가하는 버튼을 만들어보자.

 

먼저 list 페이지에서 버튼과 수량을 나타내보겠음

 

이제 버튼 클릭 시 JS 코드를 실행시키려면 onClick 속성을 하용하면 된다.

onClick

하지만 이렇게 사용하면 에러가 발생한다.

에러 발생

 

이유는 클라이언트 컴포넌트가 아니라 서버 컴포넌트이기 때문에 에러가 발생하는 것이다.

(onClick 속성은 클라이언트 컴포넌트에만 사용 가능함)

 

그래서 클라이언트 컴포넌트로 바꾸어 줘야한다.

최상단에 'use client' 해주면 클라이언트 컴포넌트

       

버튼 클릭 시 로그 잘 찍힘

 

onClick 잘 되는것을 확인했으니

이제는 원하는데로 onClick시 수량이 증가하도록 코드를 작성해보자.

 

먼저 상품 수량을 담을 state를 만든다.

(state를 쓰면 값이 변경되면 자동 재렌더링이 되므로 아주 좋음)

state 만들어준다.

 

이제 JSX에서 중괄호 문법으로 count를 가져다 사용하고

onClick 속성으로 setCount 함수를 사용해 count를 변경해주면 된다.

count+1 해주면 1씩 증가할 것임

버튼 클릭 시 숫자 잘 증가함