인프런 커뮤니티 질문&답변

작성한 질문수

웹 게임을 만들며 배우는 React

6-4. useEffect로 업데이트 감지하기

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

작성

·

211

0

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

답변 3

0

질문자

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

반영된 모습을 콘솔로 출력되게끔하기위해 갖가지 방법을 써봤지만 되지 않아서 여쭤봤습니다. 비동기처리된것은 따로 나타날 수 없나요?

제로초(조현영)

지식공유자

setWinBalls((prev) => {...}, (next) => console.log(next))

두 번째 인자 함수가 있습니다.

0

질문자

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

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

제로초(조현영)

지식공유자

무엇이 문제인지를 잘 모르겠습니다.

useEffect는 변화 양상에 따라 리렌더링될 수도 있는게 아니라 변화하면 무조건 재실행됩니다.

0

제로초(조현영)

지식공유자

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

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

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

작성한 질문수