[React] useState를 사용했을때 useEffect로 현재 상태 출력하기

React 를 사용하면 setState를 사용하게 될 텐데,

 

setState 함수를 활용하여 현제 상태를 변경해주는 것을 확인하기 위해 다음과 같은 코드를 실행한다고 치자.

 

const [todoText, setTodoText] = useState('');

	const onChange = (e) => {
		setTodoText(e.target.value);
		console.log(todoText);
	};

	return (
		<div>
			<input
				type="text"
				placeholder="할 일을 입력하세요."
				onChange={onChange}
			/>
		</div>
	);

 

그럼 input값에 텍스트 변화를 줄 때마다 console에 즉시 변경된 값이 변형되어 출력되는가?

 

아니다. 

실제로는 아래와 같이 동작한다.

 

 

마치 이전 상태를 console창에 출력하는 듯한 효과를 느낄 수 있는데,

 

이것은 setState 가 비동기로 처리되기 때문이다.

setState로 값이 바뀌고 console에 바뀐 값을 출력했던게 아니라,

 

setState와 console.log가 동시에 실행되었던 것이다.

(setState가 완료되길 기다리지 않고 바로 console.log가 실행되었다는 뜻)

 

그럼 이런 경우에는 어떻게 현재의 값을 출력할 수 있는가?

state를 변경하면 다시 렌더링 될 때 그값이 반영되므로, 일반적인 방법으로는 변경된 상태를 바로 출력할 수 없다.

 

이런 경우에는 useEffect를 사용하여 해당 state가 변할때의 동작을 정의해줌으로써 문제를 해결할 수 있다.

 

import React, { useEffect, useState } from 'react';
import { isWhiteSpace } from './utils';

function TodoInput() {
	const [todoText, setTodoText] = useState('');

	useEffect(() => {
		console.log(todoText);
	}, [todoText]);

	const onChange = (e) => {
		setTodoText(e.target.value);
	};

	return (
		<div>
			<input
				type="text"
				placeholder="할 일을 입력하세요."
				onChange={onChange}
			/>
		</div>
	);
}

export default TodoInput;

 

참고: darrengwon.tistory.com/651