Next.js 클릭 이벤트와 State 관리 (6)

React에서 클릭 이벤트와 State 관리하기

 

1. 클릭 이벤트 처리하기

HTML 요소에 클릭 이벤트를 추가하려면 onClick 핸들러를 사용합니다. 이는 클릭 시 특정 자바스크립트 코드를 실행시키는 역할을 합니다.

//jsx
<button onClick={()=>{ console.log(1) }}>버튼</button>

위의 코드에서는 버튼을 클릭하면 콘솔에 1이 출력되도록 설정했습니다.

 

 

2. Client Component에서 JavaScript 기능 추가하기

Next.js에서는 Server Component에서는 HTML 안에 JavaScript 기능을 넣을 수 없습니다. 

이를 해결하기 위해 Client Component를 사용합니다. 이를 사용하려면 파일 맨 위에 'use client'를 적어야 합니다.

//jsx
'use client';

export default function List(){
  return (
    (생략)
    <h4 onClick={()=>{ console.log(1) }}>버튼</h4>
  )
}

위의 코드에서는 'use client'를 추가하여 클릭 이벤트를 처리하도록 설정했습니다.

 

 

3. State 사용하기

React에서는 자주 변경되는 데이터를 자동으로 HTML에 반영하려면 State를 사용해야 합니다.

//jsx
'use client';
import {useState} from 'react'

export default function List() {
  let [수량, 수량변경] = useState(0)
  return (
    <div>
      <h4 className="title">상품목록</h4>
      { 상품.map(()=>{
        <div className="food" key={i}>
          <img src={`/food${i}.png`} className="food-img"/>
          <h4>{a} $40</h4>
          <span> {수량} </span>
          <button>+</button>
        </div>
      }) }
      
      (생략)
    </div> 
  )
}

위의 코드에서는 useState를 이용하여 수량이라는 State를 만들었습니다.

 

 

 

4. State 수정하기

State를 수정하려면 State 변경 함수를 사용해야 합니다. 이 함수는 State 이름을 작명할 때 오른쪽에 작명한 함수입니다.

//jsx
<span> {수량} </span>
<button onClick={()=>{ 수량변경(수량+1) }}>+</button>

위의 코드에서는 버튼을 클릭하면 수량이 1 증가하도록 설정했습니다.

 

 

 

5. 여러 상품의 수량 State 만들기

상품이 여러 개일 때 각 상품의 수량을 따로 기록해야 합니다. 이때 State를 여러 개 만들 수도 있지만, 배열을 이용하면 한 번에 관리할 수 있습니다.

//jsx
export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut'];
  let [수량, 수량변경] = useState([0,0,0]);
  return (
    <div>
      <h4 className="title">상품목록</h4>
      
      <span>{수량[0]}</span>
      <button>+</button>
      <span>{수량[1]}</span>
      <button>+</button>
      <span>{수량[2]}</span>
      <button>+</button>
      (생략)
    </div>
  )
}

위의 코드에서는 useState를 이용하여 수량이라는 State를 배열로 만들었습니다.

 

 

 

6. State 복사 후 수정하기

State를 직접 수정하는 것이 아니라 복사하여 수정한 후, 이를 State에 적용해야 합니다.

//jsx
export default function List() {
  let 상품 = ['Tomatoes', 'Pasta', 'Coconut'];
  let [수량, 수량변경] = useState([0,0,0]);
  return (
    <div>
      <h4 className="title">상품목록</h4>
      
      <span>{수량[0]}</span>
      <button onClick={()=>{ 
        let copy = [...수량]
        copy[0]++
        수량변경(copy)
       }}>+</button>
      (생략)
    </div>
  )
}

위의 코드에서는 버튼을 클릭하면 수량 State를 복사하여 해당 상품의 수량을 증가시킨 후, 이를 다시 State에 적용하도록 설정했습니다.

 

 

 

7. State 변경 시 주의사항

React에서는 State 변경 함수를 사용할 때 기존 State와 변경 후 State가 같은지 검사합니다. 같다면 State 변경을 실행하지 않습니다. 이는 성능 최적화를 위한 방법입니다. 따라서 State를 직접 수정하면 변경이 이루어지지 않을 수 있습니다. 항상 복사를 통해 수정하고 이를 State에 적용해야 합니다.