state counter practice

기본적인 counter 만드는걸 배워봄..
밑의 코드를 살펴보자

import React from "react"

export default function App() {
    /**
     * Challenge: 
     * Add functionality to the minus button
     */
    const [count, setCount] = React.useState(0)
    
    function add() {
        setCount(count + 1)
    }
    
    function subtract() {
        setCount(count - 1)
    }
    
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <div className="counter--count">
                <h1>{count}</h1>
            </div>
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

이 코드를 보면 여기도

 const [count, setCount] = React.useState(0)

이렇게 destrcutring 해주고 기본값을 0으로 설정해줌..
혼자 했을 때 이부분을 틀렸음 ㅠㅠ
그리고

    function add() {
        setCount(count + 1)
    }
    
    function subtract() {
        setCount(count - 1)
    }

setCount에 간단하게 이렇게 해줘도 이 코드는 작동하는데
보통 이렇게 쓰지 않고 아래와 같이 callback function을 이용해서
쓴다고 한다.

import React from "react"

export default function App() {
    const [count, setCount] = React.useState(0)
    /**
     * Note: if you ever need the old value of state
     * to help you determine the new value of state,
     * you should pass a callback function to your
     * state setter function instead of using
     * state directly. This callback function will
     * receive the old value of state as its parameter,
     * which you can then use to determine your new
     * value of state.
     */
    function add() {
        setCount(prevCount => prevCount + 1)
    }
    // Challenge: update `substract` to use a callback function
    
    function subtract() {
        setCount(prevCount => prevCount - 1)
    }
    
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <div className="counter--count">
                <h1>{count}</h1>
            </div>
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

callback함수를 arrow function으로 이용해서 쓴거다.
만약 arrow function 안쓰고 원래 function으로 쓰면
아래와 같다.

  function add() {
        setCount(function(oldValue) {
            return oldValue + 1
        })
    }
    

위의 코드에 관련된 퀴즈

1. You have 2 options for what you can pass in to a
   state setter function (e.g. setCount). What are they?

a. New value of state (setCount(42))
->이건 위에서

function add() {
        setCount(count + 1)
    }

이렇게 했던걸 말한다.
b. Callback function - whatever the callback function
returns === new value of state
->이건 위에서

 function add() {
        setCount(prevCount => prevCount + 1)
    }

이렇게 했던걸 말한다.

2. When would you want to pass the first option (from answer
   above) to the state setter function?
   Whenever you don't need the previous value of state to determine
   what the new value of state should be.

3. When would you want to pass the second option (from answer
   above) to the state setter function?
   Whenever you DO need the previous value to determine the new value