8. State의 작동 방식

1. useState 는 언제 상태를 업데이트 하는가?

 

        function Demo(){
            const [x, setX] = useState(false)

            function change(){
                setX(true)
                console.log(x)	// false
            }
        }

 

useState 는, "State 의 변화를 스케쥴링" 한다.

여러개의 상태변화라면,

    "A 를 B 로 바꾸려는 스케쥴", "B 를 C 로 바꾸려는 스케쥴"을 "지정하고, 수행한다."

그리고 컴포넌트가 전부 "재평가" 가 될때, 그 이후 State는 업데이트가 된다.

 

가장 흔한 실수로

     const [enteredName, setEnteredName] = useState("before N")

    function submitHandler(){
        setEnteredName(e.target.value)

        console.log(enteredName)        // "before N"
    }

그러므로, 훅이 포함되어있는 함수내에서, 변경된 값을 바로 적용하려면,  State 가 아닌,

변수에 저장된 값을 직접 넣어주어야 한다.

 

    function submitHandler(e){

        setEnteredName(e.target.value)

        console.log(e.target.value)        // "after N"
    }