[React] 반복문 안에서 setState 사용

문제점

프로젝트(LibertyForm) 진행 중 백엔드에서 설문 상세 정보(JSON)를 받았고 배열 형태로 받았지만 내가 원하는 형태의 데이터가 아니었다. 따라서 받은 데이터를 useState에 담고, 반복문을 돌려 setState를 하려고 했다.

BUT, 반복문으로 setState를 사용하니 데이터가 쌓이는게 아닌 마지막 setState만 적용이 되었다.

원인

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

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

→ 결국 반복문을 돌려도 state가 바뀌지 않아서, 계속 초기상태의 state를 사용하기에 축적이 불가능!

공식문서

• 반복문 내에서는 setState를 사용하지 않는 것이 원칙
• 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하지 말 것
  Hook의 규칙 - React

해결방안

반복문을 통한 setState를 어떻게 다른 방법을 사용할 수 있을지 많은 고민을 했다.

• state대신 let으로 선언해 반복문을 돌려주고 변환된 데이터를 setState를 통해 적용시켰다.

//Preview.js

useDidMountEffect(() => {
        let choice = surveyDetail.choiceQuestions.map((choiceQuestion) => ({ ...choiceQuestion.question, choices: choiceQuestion.choices })) // 객관식 문제만 따로 빼준다
        setNewSurveyDetail((prev) => ({ ...surveyDetail, questions: [...surveyDetail.questions, ...choice] })) // 주관식과 객관식 문제를 합쳐준다.
    }, [surveyDetail]);