[React] 반복문에서 setState?

나 : 배열 길이만큼 for문 돌리면서 배열의 값을 state 변수에 저장할게 !!

현실 : 되겠냐 ㅋㅋ

잉잉...잉잉.. 왜 안되냐고 ..

 

🔎 원인을 알아보자

state 값을 변경시켜주는 setState()는 비동기이기 때문 !

 

즉각적으로 상태를 업데이트 시켜준다면 반복문 내에서도 사용이 가능하다.

하지만 

setState() 는 Promise 를 이용해 비동기적으로 상태를 변화시키기 때문에 생각처럼 작동하지 않는다.

 

더 자세히 알아보면,

setState()를 호출하게 되면 UpdateQueue에 업데이트 요청이 큐잉되고 비동기적으로 하나씩 처리한다.

이 업데이트 요청이 완료되기 전에 새로운 업데이트 요청이 들어오게 되면 업데이트 전의 값을 기준으로 다시 큐잉되게 한다. 

 

그렇다. 

for문 안에서 setState() 로 업데이트 요청을 했는데 처리가 되기도 전에 계속해서 업데이트 요청이 들어오는 것이다.

업데이트큐에서는 업데이트를 처리하기도 전에 다음 요청이 계속해서 들어오게 되니 결국 업데이트 전의 값을 기준으로 하다가 마지막 요청만 받은 것으로 되어 state 에는 마지막 값만 들어가게 되는 것이다.

 

 

🧐 해결해보자

반복문 내에서는 setState를 사용하지 않아야 하는 게 암묵적 룰 !

 

반복문을 통해 state에 값을 넣고 싶다면 반복문 바깥에 변수를 하나 생성해주고 그 변수에 값을 넣어준 후 그 값을 setState() 해주면 된다. 쉬운 예로 보자.

 

해결 전

const [state, setState] = useState([]);

for(let i = 0; i < 3; i++) {
	setState([...state, i]);
}

console.log(state);		// [2]

 

해결 후

const [state, setState] = useState([]);

let arr = [];
for(let i = 0; i < 3; i++) {
	arr.push(i);
}
setState(arr);

console.log(state);		// [0, 1, 2]