인프런 커뮤니티 질문&답변
작성한 질문수
useEffect부분에서 질문이 있습니다.
21.08.27 17:10 작성
·
210
0
react 공식홈페이지를 살펴보니 useEffect의 두번째 인수는 그 인수값과의 변화가 발생했을 때 useEffect를 다시 렌더링한다고 되어 있습니다. 그래서 timeouts.current를 두번째 인수로 넣으면 잘 실행되는 것은 이해가 됩니다. 그런데 winBalls.length를 넣었을 때 차이가 있는 지 살펴보기 위해 반복문에서 console을 입력해보았더니 winBalls.length는 항상 0 이고 winBalls는 그 값이 바뀌지 않았습니다.
이런식으로 말이죠. 그래서 다시 timeout.current로 두번째인수로 변경해서도 콘솔 값을 확인했더니 여전히 winBalls는 계속해서 바뀌지 않았습니다.
이런식으로 말이죠. 계속해서 0으로만 winBalls가 출력되는데 왜 업데이트가 발생하지 않는지 그 이유가 궁금합니다.
답변 3
0
2021. 08. 27. 20:41
업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다.
반영된 모습을 콘솔로 출력되게끔하기위해 갖가지 방법을 써봤지만 되지 않아서 여쭤봤습니다. 비동기처리된것은 따로 나타날 수 없나요?
0
2021. 08. 27. 19:39
아하 이 부분을 해결하려면 어떻게 하면 될까요? 혹시 어떻게 검색해야하는지만 알려주셔도 감사합니다ㅠ
useEffect가 두번째 인수의 변화의 양상에 따라서 리렌더링 될수도 있으니 그과정을 꼭 확인해보고 싶은데 도저히 어떻게 해야할 지 모르겠네요ㅠ
2021. 08. 27. 19:53
무엇이 문제인지를 잘 모르겠습니다.
useEffect는 변화 양상에 따라 리렌더링될 수도 있는게 아니라 변화하면 무조건 재실행됩니다.
0
2021. 08. 27. 18:14
업데이트는 정상적으로 되는데요. 문제는 setWinBalls는 비동기인지라 바로 다음줄에서 winBall이 새로운 값으로 반영되지 않습니다.
그리고 클로저 문제로 인해서 winBall은 항상 초기값이 될 것입니다.
const [a, setA] = useState(0);
setA(1); // 비동기
console.log(a); // 여전히 0
2021. 08. 27. 21:17
setWinBalls((prev) => {...}, (next) => console.log(next))
두 번째 인자 함수가 있습니다.