[NextJS] handleInputChange이벤트 setInputValue 값 바로 안 바뀜.

Error

NextJS에서 아래와 같이 handleInputChange 이벤트에서 setInputValue로 값을 바꿔고 바로 안 바뀌고 이전 값이 출력되는 현상 발생.

export default function Page() {

    const [inputValue, setInputValue] = useState(0);
    
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(Number(e.target.value));
        
        console.log(inputValue); // 이전 값 출력
    };
    
    ...
    
}

 

 

 

반응형

---

 

Solution

이건 React의 상태 업데이트 시 동기(Syncronize) 처리하지 않고 비동기로 처리하기 때문에 발생함.

 

그래서 값변경 이벤트 시 변경된 새로운 변수를 조회하기 위해서는 e.target.value 값을 그대로 사용하거나, useEffect를 이용해서 값이 바뀐 후 로직을 작성해야함.

 

나의 경우 다른 변수들을 함께 공통으로 사용하기 위해 useEffect를 이용하여 해결함.

 

export default function Page() {

    const [inputValue1, setInputValue1] = useState(0);
    const [inputValue2, setInputValue2] = useState(0);
    const [outputValue, setOutputValue] = useState(0);
    
    useEffect(() => {
         let result = 0;
         
        /*
         *
         *
         * your logic with inputValue1, inputValue2
         *
         *
         */
         
         setOutputValue (result)

    }, [inputValue1, inputValue2])   
    
    const handleInputChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue1(Number(e.target.value));
    };
    
    const handleInputChange2 = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue2(Number(e.target.value));
    };
    
    ....
    
}

 

---

Thank you!