비동기 함수 관련 질문이 있습니다.
362
작성한 질문수 61
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);
}
두 개를 비교해보세요.
0
그렇다는 것은 setInterval이 반복문의 역할을 한다는 말씀이신가요?
그렇게 된다면 setState가 비동기의 역할을 하므로 둘이 만나면 클로저가 발생이 된다는 것으로 이해하면 될까요?
0
클로저 문제는 반복문과 비동기 함수가 만나서 발생하는 현상을 '클로저를 사용해서 해결하는 문제'입니다. 클로저가 원인인 문제가 아닙니다. setInterval이 반복문의 역할을 하는 게 아닙니다.
0
setTimeout 이나 setInterval 실행 시 내부 콜백 함수는 고정된 closure 를 가지게 됨
따라서 참조하고 있는 변수가 변하더라도 호출 시점에 closure 는 고정되기 때문에 변수도 고정됨
구글링으로 찾아본 결과 이렇게 설명하는 블로그를 찾았는데, 이렇게 이해를 하면 되는게 맞나요
아니면, 실행컨텍스트 상 상위컨텍스트에 구조분해할당으로 imgCoord에 고정된 값을 부여함으로 인해, 참조관계에서 imgCoord 변수가 복사관계로 변경되고, setInterval에서의 setState()로 state 의 imgCoord를 변경시키지만, imgCoord에 이미 저장되어있는 값으로 인해 외부의 state imgCoord 값에 도달이 안되는 건가요?
그것도 아니라면 강의에서 setInterval에서 imgCoords변수의 내용을 변경했는데, 외부 변수에 변경이 되지 않는 이유를 도저히 모르겠습니다.
0
네 위에 설명이 맞습니다. 클로저는 함수와 외부 변수와의 관계입니다. setTimeout 안에 있는 함수랑 바깥의 this.state.imgCoords가 클로저를 생성해서 값이 고정되어버립니다. imgCoords는 구조분해 할당으로 인해서 참조가 아닌 값이 되는 것도 맞고요.
npm run dev 실행 시 포트가 안뜨는 문제
0
202
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
85
2
렌더링 테스트 코드 (Hooks)
0
80
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
149
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
191
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
95
1
useMemo와 useCallback 사용 시기
0
205
2
onRightClickTd가 작동을 하지 않습니다.
0
226
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
248
1
npx webpack 실행시
0
313
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
235
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
530
2
React 랜더링이 되지 않습니다.
0
410
2
비동기로 동작하는 setState에 대해서
0
331
1
npm run dev 할 때 에러발생
0
478
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
206
1
devMiddleware의 필요성
0
352
1
리액트에서 화살표 함수를 사용해야하는 이유
0
935
2
path.join관련질문
0
282
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
374
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
491
4