[React] 반복문 내에서 setState 사용? (에러)

반복문 내에서 setState를 사용했더니, 데이터가 쌓이지 않고 마지막에 넣어준 데이터만 적용되었다.

 

문제 상황

- 반복문 내에 setState를 사용하여 데이터 축적 시도

- 그러나 데이터가 쌓이지 않고, 반복문에서 마지막 순서의 데이터만 입력되었다.

- 즉 반복문 조건이 0부터 i번째 까지라면, i번째의 데이터만 state에 입력되었다.

 

원인

- setState는 즉각적으로 상태를 업데이트 하지 않고, Promise를 통해 비동기적으로 상태를 변경시킨다.

- 반복문을 돌리는 과정에서 setState를 사용해도, 반복문이 끝나기 전까지는 State가 변경되지 않는다.

- 반복문을 돌려도 state가 바뀌지 않아서, 계속 초기 상태의 state를 사용하기 때문에 데이터가 축적되지 않는다.

 

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

const testHandler = () => {

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

}

console.log('state', state)
// state의 초기값은 빈 배열 : state=[]

// i=0 일 때, setState를 통해 state=[0] 으로 변경
// i=1 일 때, 여전히 state=[]이며, setState를 통해 [1] 로 변경
// i=2 일 때, 여전히 state=[]이며, setState를 통해 [2] 로 변경
// i=3 일 때, 여전히 state=[]이며, setState를 통해 [3] 로 변경

// 반복문을 돌면 state=[3] 이 된다.

 

해결방안

- 반복문 내에서는 setState를 사용하지 않는 것이 원칙이며, 반복문을 통한 결과물만 setState에 넣어주기

- 공식 문서에서도 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하지 말라고 함

- 링크 : https://ko.reactjs.org/docs/hooks-rules.html

Hook의 규칙 – React