오늘은(사실 무척 옛날에) 흥미로운 점을 발견했다!
toggle 기능 (사실은 alarm을 구현하고 있었다)을 알아보고 있는데, usestate가 바로 반영되지 않는 것을 확인할 수 있었다.
즉,
const [activate, setActivate] = useState(false);
const onTrue = async() => {
setActivate(true);
serverConnect(activate);
}(toggle 함수여서 위와 코드는 다르지만, 내가 배운점은 위와 같다)
라는 함수를 짰더니, 띠용? serverConnect가 false로 들어감을 확인할 수 있었다.
흠, 잘못했을리는 없고, 결국 usestate의 state변환이 async한건가? 라는 생각이 들었다.
앞에 await를 붙여보았지만 실패, 그런건 아니었다.
좀 더 자세히 알아보려 했더니, 띠용?
https://stackoverflow.com/questions/54119678/is-usestate-synchronous
이미 많은 사람들이 usestate가 async하게 동작(?)한다는걸 파악했나보다.
다만 await로 안되는걸 보니 (그리고 usestate가 global같은 느낌으로 동작한다는 것을 느꼈던 나는) 아하 usestate가 static으로 이루어진건 아닌가? 라는 생각을 했다.
좀 더 찾아보니(위의 링크) 아하, useEffect를 사용하면 된다고 했다.
첫 rendering에서는 사용이 안되는 것이 좋아서, 나는 useeffect를 사용하진 않고, 간단하게 순서를 바꿔서 문제를 해결했다.
const [activate, setActivate] = useState(false);
const onTrue = async() => {
serverConnect(! activate); //changed
setActivate(true); //changed
}usestate가 async?야? 그럼 sync먼저 해결하지 뭐~
라는 느낌으로 짰지만, 아무래도 추후에 값들을 변환해야할때, 주의를 해야하지 싶었다.
원래 배경이 c++여서 요새는 리액트를 다 뜯어보고 싶은 마음이 든다.
프론트와 친하지는 않지만(나는 백엔드를 지향한다...?) 가끔씩 궁금해 지는 부분이다.
역시, 쓸모없는 edge case가 가장 흥미롭다...
