1. 이벤트 설정

• Counter에서 버튼이 클릭되는 이벤트가 발생하도록 특정 함수가 호출되도록 설정

Counter.js

export const Counter = () => {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1')
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

• 함수 만든 후, button의 onClick으로 각 함수 연결
• 이벤트 설정
  • on이벤트이름 = {실행하고 싶은 함수}
  • onClick={onIncrease()}는 안됨

2. 동적인 값 끼얹기, useState

• 컴포넌트에서 동적인 값을 상태(state)라고 부름
• useState 함수 : 컴포넌트에서 상태 관리 가능

Counter.jsx

import React, { useState } from 'react'

export const Counter = () => {
  const [number, setNumber] = useState(0)

  const onIncrease = () => {
    setNumber(number + 1)
  }
  const onDecrease = () => {
    setNumber(number - 1)
  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

1) useState 라이브러리 import

import React, { useState } from 'react'

2) useState 함수 불러오기

const [number, setNumber] = useState(0)

• useState를 사용할 때 : 상태의 기본값을 파라미터로 넣어서 호출
• 함수를 호출해주면 배열이 반환
  • 첫번째 원소 : 현재 상태
  • 두번째 원소 : Setter 함수

3. 함수형 업데이트

• Setter 함수를 사용할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣음
• 기존 값을 어떻게 업데이트할지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있음

Counter.js

import React, { useState } from 'react'

export const Counter = () => {
  const [number, setNumber] = useState(0)

  const onIncrease = () => {
    setNumber((prevNumber) => prevNumber + 1)
  }
  const onDecrease = () => {
    setNumber((prevNumber) => prevNumber - 1)
  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  )
}

• onIncrease와 onDecrease에서 setNumber을 사용할 때 파라미터로 넣어준 것이 아닌, 값을 업데이트 하는 함수를 파라미터로 넣음
  • prevNumber
• 함수형 업데이트 : 주로 나중에 컴포넌트를 최적화하게 될 때 사용

해당 내용은 다음 자료를 참고했습니다.
https://react.vlpt.us/basic/07-useState.html