인프런 커뮤니티 질문&답변
작성한 질문수
비동기 함수 관련 질문이 있습니다.
작성
·
313
0
setInterval과 외부 변수와의 관계를 정확히 이해하지 못했습니다. 참조하는 변수가 객체나 배열일 때만 이 문제가 발생하는건지요?
let a = 0;
this.interval = setInterval(() => {
console.log(a);
if(a === 0 ){
a = -1;
}else if( a=== -1){
a = 1;
}else if( a === 1){
a = 0;
}
},1000)
이 부분의 경우는 이상없이 잘 동작하는 걸 확인했습니다.
그런데 객체나 배열의 경우에만 비동기 참조관계가 어그러지는건지와 말씀하신 것 처럼 왜 imgCoords 변수가 고정되는지가 궁금합니다.
답변 1
0
클로저 문제는 반복문과 비동기 함수가 있어야 발생합니다.
for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 1000);
}
for (let i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 1000);
}
두 개를 비교해보세요.
클로저 문제는 반복문과 비동기 함수가 만나서 발생하는 현상을 '클로저를 사용해서 해결하는 문제'입니다. 클로저가 원인인 문제가 아닙니다. setInterval이 반복문의 역할을 하는 게 아닙니다.
setTimeout 이나 setInterval 실행 시 내부 콜백 함수는 고정된 closure 를 가지게 됨
따라서 참조하고 있는 변수가 변하더라도 호출 시점에 closure 는 고정되기 때문에 변수도 고정됨
구글링으로 찾아본 결과 이렇게 설명하는 블로그를 찾았는데, 이렇게 이해를 하면 되는게 맞나요
아니면, 실행컨텍스트 상 상위컨텍스트에 구조분해할당으로 imgCoord에 고정된 값을 부여함으로 인해, 참조관계에서 imgCoord 변수가 복사관계로 변경되고, setInterval에서의 setState()로 state 의 imgCoord를 변경시키지만, imgCoord에 이미 저장되어있는 값으로 인해 외부의 state imgCoord 값에 도달이 안되는 건가요?
그것도 아니라면 강의에서 setInterval에서 imgCoords변수의 내용을 변경했는데, 외부 변수에 변경이 되지 않는 이유를 도저히 모르겠습니다.
네 위에 설명이 맞습니다. 클로저는 함수와 외부 변수와의 관계입니다. setTimeout 안에 있는 함수랑 바깥의 this.state.imgCoords가 클로저를 생성해서 값이 고정되어버립니다. imgCoords는 구조분해 할당으로 인해서 참조가 아닌 값이 되는 것도 맞고요.
그렇다는 것은 setInterval이 반복문의 역할을 한다는 말씀이신가요?
그렇게 된다면 setState가 비동기의 역할을 하므로 둘이 만나면 클로저가 발생이 된다는 것으로 이해하면 될까요?