[React] useState 동기적 처리

state로 상태 관리를 하다가 setState를 하여 콘솔에 찍어보면
한 박자씩 느리게 찍히는 경우가 있을 것이다.
이것은 useState가 비동기적으로 처리되기 때문이다.

이를 해결하기 위해서는 useEffect를 사용하거나,
setState의 인자로 함수를 넣는 방법이 있다.

1) useEffect의 dependency array를 사용하여 해결

ex) const [url, setUrl] = useState("");
useEffect(() => {}, [url])

 

2) setState의 인자로 함수 넣어서 해결
ex) const [url, setUrl] = useState("");

setUrl((preUrl) => preUrl = URL)
(위 URL은 함수 실행 시 값을 받아왔다고 가정한 변수이다)