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가 출력되는데 왜 업데이트가 발생하지 않는지 그 이유가 궁금합니다.

Answer

업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다.

그리고 클로저 문제로 인해서 winBall은 항상 초기값이 될 것입니다.

const [a, setA] = useState(0);
setA(1); // 비동기
console.log(a); // 여전히 0

Answer

아하 이 부분을 해결하려면 어떻게 하면 될까요? 혹시 어떻게 검색해야하는지만 알려주셔도 감사합니다ㅠ

useEffect가 두번째 인수의 변화의 양상에 따라서 리렌더링 될수도 있으니 그과정을 꼭 확인해보고 싶은데 도저히 어떻게 해야할 지 모르겠네요ㅠ

Answer

업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다.

그리고 클로저 문제로 인해서 winBall은 항상 초기값이 될 것입니다.

const [a, setA] = useState(0);
setA(1); // 비동기
console.log(a); // 여전히 0

neostgeart

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

이 글과 비슷한 Q&A

리액트 장바구니 총 합계 금액 계산 함수 어떻게 해야할까요?

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요