useEffect부분에서 질문이 있습니다.

Question

react 공식홈페이지를 살펴보니 useEffect의 두번째 인수는 그 인수값과의 변화가 발생했을 때 useEffect를 다시 렌더링한다고 되어 있습니다. 그래서 timeouts.current를 두번째 인수로 넣으면 잘 실행되는 것은 이해가 됩니다. 그런데 winBalls.length를 넣었을 때 차이가 있는 지 살펴보기 위해 반복문에서  console을 입력해보았더니 winBalls.length는 항상 0 이고 winBalls는 그 값이 바뀌지 않았습니다.  for ( let i = 0 ; i < winNumbers . length - 1 ; i ++ ) { // let을 쓰면 closure 문제가 발생하지 않는다. timeouts . current [ i ] = setTimeout ( () => { setWinBalls ( ( prevBalls ) => [ ... prevBalls , winNumbers [ i ]]) ; console . log ( winBalls , " 얘가 winBalls " ) ; console . log ( winBalls . length , " 이것이 배열의길이 " ) ; }, ( i + 1 ) * 1000 ) ; } 이런식으로 말이죠. 그래서 다시 timeout.current로 두번째인수로 변경해서도 콘솔 값을 확인했더니 여전히 winBalls는 계속해서 바뀌지 않았습니다.  이런식으로 말이죠. 계속해서 0으로만 winBalls가 출력되는데 왜 업데이트가 발생하지 않는지 그 이유가 궁금합니다.

neostgeart · Answer

업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다. 반영된 모습을 콘솔로 출력되게끔하기위해 갖가지 방법을 써봤지만 되지 않아서 여쭤봤습니다. 비동기처리된것은 따로 나타날 수 없나요?

neostgeart · Answer

아하 이 부분을 해결하려면 어떻게 하면 될까요? 혹시 어떻게 검색해야하는지만 알려주셔도 감사합니다ㅠ  useEffect가 두번째 인수의 변화의 양상에 따라서 리렌더링 될수도 있으니 그과정을 꼭 확인해보고 싶은데 도저히 어떻게 해야할 지 모르겠네요ㅠ

제로초(조현영) · Answer

업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다. 그리고 클로저 문제로 인해서 winBall은 항상 초기값이 될 것입니다. const [a, setA] = useState(0); setA(1); // 비동기 console.log(a); // 여전히 0