[React] 에러 #1

input에 돈을 넣었을 때 거스름돈을 구해 출력해주는 코드를 작성하고자 했다.

다음과 같이 열심히 짜보았으나,

...
const Change = () => {
    const [money, setMoney] = useState(0);
    
    const handleChange = (event) => {
        setMoney((money) => money = event.target.value)
    }
    
    return (
        <div>
            <input onChange={handleChange}/>
            <div>거스름돈은 {money}원 입니다.</div>
        </div>
    )
}

export default Change;

TypeError: Cannot read properties of null (reading 'value')
함께 한 번 입력했을 때는 잘 실행되고, 두 번째 입력 때 위와 같은 에러가 발생하는 것이었다..!

구글링도 해보고, 질문도 날려본 결과 내가 내린 결론은 다음과 같다.

State를 변경하는 방법은 2가지가 있는데, setState에 바로 변경할 값을 넣는 방법과 함수를 넣는 방법이 있다.

const [count, setCount] = useState(0);
setCount(count + 1);

이렇게 작성을 하거나

const [count, setCount] = useState(0);
setCount((current) => {
	return current + 1
})

이렇게 작성을 해야한다고 배웠었는데, 나는 아무런 의심도 없이 항상 함수로만 작성했던 것이다........ 🤦‍♀️

또 event객체를 사용할 때는 변수에 event.target.value를 할당하고 사용해줘야 오류가 발생하지 않는다고 한다.

친절한 답변들을 통해 얻은 해답은

setMoney(event.target.value)

또는

const value = event.target.value
setMoney(() => value)

로 작성하는 것이었다.

리액트는 참 어렵다....