🍇Basic React Part 1 - Counter 기능 만들기

import React, { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 1,
    }
  }
  render() {
    const { count } = this.state
    return (
      <>
        <h1>
          {count === 0
            ? `더 이상 ${count} 에서 뺄 수 없어요.`
            : `현재 개수는 ⏩ ${count}`}
        </h1>
        <button onClick={() => this.setState({ count: count + 1 })}>Add</button>
        <button
          onClick={() => {
            if (this.state.count !== 0) {
              this.setState(
                prevState => ({ count: prevState.count - 1 }),
                () => console.log('방금 setState 가 호출되어 하나 뺏습니다.')
              )
            }
          }}
        >
          Subtract
        </button>
      </>
    )
  }
}

export default Counter

const { count } = this.state

if (this.state.count !== 0) {
  this.setState(
    prevState => ({ count: prevState.count - 1 }),
    () => console.log('방금 setState 가 호출되어 하나 뺏습니다.')
  )
}

import React, { useState } from 'react'

const CounterFunc = () => {
  const [count, setCount] = useState(1)
  return (
    <>
      <h1>
        {count === 0
          ? `더 이상 ${count} 에서 뺄 수 없어요.`
          : `현재 개수는 ⏩ ${count}`}
      </h1>
      <button onClick={() => setCount(count + 1)}>Add</button>
      <button
        onClick={() => {
          if (count !== 0) {
            setCount(count - 1)
          }
        }}
      >
        Subtract
      </button>
    </>
  )
}

export default CounterFunc