[react] state 는 setState 후 바로 수정되지 않는다!

컴포넌트에 클릭 시, check 라는 state 를 변경하는 버튼을 만들었다

근데... setCheck 수정 함수 뒤에 console.log 로 찍어보니 엥! 버튼 클릭 뒤에선 수정되지 않은 초기값 그대로잖아?

의심이 가는 부분이 있어서 useEffect 로 check 를 감시하여 콘솔로그로 찍어보았는데

useEffect 에는 check state의 변경이 제대로 적용이 되어있다

??!!

아하? 그렇다!

저번에도 계속 말한 내용이지만 automatic Batching 에 의해서 바로 state 가 변경되지 않고, 컴포넌트 함수가 모두 실행되기 전까지는 state 변경 사항들을 적용하지 않는 것이다!

state 가 변경 되고 나서야 useEffect 가 실행되어서 감시하는 state 가 있는지 등등의 useEffect 기능이 발동하는 것이다! 

const MyComponent = () => {

	const [check, setCehck] = useState(false);
    
    useEffect(()=>{
    	console.log('useEffect 안에서 확인 : ', check)
    }, [check])
    
    return (
    	<div>
        	<button onClick={() => {
            		setCheck(true)
                	console.log('버튼 클릭! : ', check)
                }>
            </button>
        </div>
    )
}

// 버튼 클릭! : false
// useEffect 안에서 확인 : true

 

즉, 컴포넌트의 return 으로 시작하는 JSX 구문에는 클릭이나 input 등의 사용자 이벤트를 통해 스위치로 쓸 상태 변화를 얻고,

useEffect 에는 거기서 얻은 수정된 상태를 스위치로서 이용하여 이벤트의 발동 시 로직을 작성해주면 되는 것이다!

중요한 건데 나만 몰라서 헤맸나보다