[React] setState 함수 특징

state 만들때 다음과 같은 방식을 사용하는데, state 변경함수들은 전부 비동기적으로 처리된다.

function App() {
	let [name, setName] = useState('kim');
}

따라서 setName()과 같은 state변경함수가 오래걸리면, 일단 이걸 놔두고 다른 밑에 있는 코드들부터 실행하여 예기치 못한 문제가 발생할 수 있다.

 

이런 문제를 해결하여, 동기적으로 (순차적으로) 실행하고 싶으면 useEffect를 사용하면된다.

특정 state가 변경될 때 useEffect를 실행할 수 있다.

useEffect는 컴포넌트가 렌더링/재렌더링될 때 실행되는 함수이다.

useEffect(() => {

}, [state명])

state가 변경되면 이 코드 실행해달라는 뜻으로 사용가능하다.

 

useEffect 사용 시 문제점

처음 페이지 로드될 때도 한번 실행되기 때문에 의도치 않은 버그가 발생 가능하다.