useState 비동기 동작

리액트로 계산기 작업중 이해가 가지 않았던 코드부분이다.

  const onClick = (item) => {
    if (item.type === "number") {
   	// 여기서 setCalc((prev) => {})부분이 이해가 가지 않았다. 어떻게 이전값을 가져올 수 있는지..
      setCalc((prev) => {
        const inputValue = shouldSetNumberRef.current
          ? item.text
          : prev.inputValue.replace(/(^0+)/, "") + item.text;
        shouldSetNumberRef.current = false;
        return {
          ...calc,
          inputValue,
        };
      });
    }
    if (item.type === "operator") {
      switch (item.text) {
        case "+":
          prevNumberRef.current =
            Number(prevNumberRef.current) + Number(calc.inputValue);
          shouldSetNumberRef.current = true;
          setCalc({ ...calc, inputValue: prevNumberRef.current });
          break;
      }
    }
  };

prev가 들어가서 어떻게 동작 되는지를 잘 몰랐었다. 

하단의 코드에서 setCount를 두번 호출해주었기 때문에 1, 2 이렇게 나올것 같지만 그렇게 작동하지 않는다.

import React, {useState} from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    const onClick = () => {
        setCount(count+1);
        console.log('click');

        setCount(count+1);
        console.log('click');
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={onClick}>+</button>
        </div>
    );
}

export default Counter;

 

useState코드를 만들어보면 

// useState 구조 
// 함수는 객체이기 때문에 파라미터(initialValue)에 숫자 문자 또는 함수가 들어갈 수 있다. 
function useState(initialValue) {
  //클로저
  let innerValue = initialValue
  
  function setValue(value) {
      if (typeof value === 'function') {
        return innerValue = value(innerValue)
      }

      return innerValue = value
  }
  
  return [innerValue, setValue]
}

const [state, setState] = useState(0);

setState((prev) => prev + 1);
setState((prev) => prev + 1);

//const [anything, setAnything] = useState(0);

//setAnything((prev) => prev + 1); 1
//setAnything((prev) => prev + 1); 2