useState 가 아무튼 안될 때

import { useState, useRef, useEffect } from "react";

function Main() {
	const [testState, setTestState] = useState(0);
	const testRef = useRef(null);

	function clickHandler(event) {
		event.preventDefault();
		setTestState(testState + 1);
	}

    useEffect(() => {
        if (!testRef) return;

        testRef.current.addEventListener('contextmenu', (event) => { clickHandler(event) });
        console.log('event added');

        return () => {
            window.removeEventListener('contextmenu', clickHandler)
        }
    }, [testRef]);

    useEffect(() => {
        console.log('testState: ', testState);
    }, [testState]);

    return (
        <div
            ref={testRef}
            style={{
                width: '100%', 
                display: 'block', 
                height: '32px', 
                backgroundColor: 'red'
            }}
        />
    );
}

export default Main;

정말 간단한 코드이다. 빨간 div 영역을 우클릭하면 state를 1 증가시켜 콘솔 로그를 찍는다.

분명 될거같은데 ? 안된다

왜 콘솔이 안 찍힐까 ..

 

setState 는 비동기로 작동하기 때문에 

setTestState(testState + 1) 의 코드를

setTestState((testState) => testState +1) 로 실행해야한다.

 

https://stackoverflow.com/questions/69616167/how-to-use-usestate-in-addeventlistener/69616373#69616373

How to use useState in addEventListener?

+ 답변 끝에 "regards," 붙이는거 존멋인거 같다.

...

 

regards,