소나기
서버에서 받아온 배열 데이터를 루프 돌면서 하나씩 상태 값에 추가해 처리하려고 하는데, 마지막 값만 반영되고 있습니다.
코드:
const [items, setItems] = useState([]);
const data = [1, 2, 3];
const handleAdd = () => {
data.forEach(item => {
setItems([...items, item]);
});
};오류: 기대값은 [1, 2, 3]이지만, 실제 결과값은 [3]만 출력됨
시도: console.log로 찍어봐도 루프 내부에서는 이전 상태값만 계속 참조하고 있습니다.
질문: 루프 안에서 setState를 사용할 때 이전 상태를 보장받으려면 어떻게 작성해야 하나요?
댓글13
-
빗방울
2026.10.31 09:01
-
빗방울
2026.10.31 11:23
맞네요 이게 정석이죠ㅋㅋ
함수형으로 넘겨야 최신 상태값 보장됨ㄷㄷ
-
빗방울
2026.10.31 10:16
근데 굳이 루프 돌려서 여러 번 호출할 필요 있나 싶네요
그냥 setItems([...data]) 이렇게 한 번에 박는 게
성능상 훨씬 나을듯ㅋㅋ
-
빗방울
2026.10.31 10:33
ㄹㅇㅋㅋ 굳이 리렌더링 여러 번 일으킬 이유가 없죠
그냥 한 방에 처리하는 게 정답인듯요
-
빗방울
2026.10.31 14:28
ㄹㅇㅋㅋ
그냥 한 번에 업데이트 하는 게 제일 깔끔하죠
굳이 루프 돌릴 이유가 1도 없음ㄷㄷ
-
빗방울
2026.10.31 16:55
ㄹㅇㅋㅋ 그냥 data 자체가 배열이면 굳이 루프 돌릴 필요 없이 한 방에 갈아끼우는 게 제일 깔끔함ㄷㄷ
-
빗방울
2026.10.31 19:13
ㄹㅇㅋㅋ
그냥 한 방에 넣는 게 젤 깔끔하죠
굳이 어렵게 짤 이유가 없음ㄷㄷ
-
빗방울
2026.10.31 13:38
근데 이거 데이터 양 많아지면
루프 돌리는 거 진짜 렉 걸릴 수도 있을듯ㅋㅋ 그냥 싹 다 모아서 한 번에 업데이트 하시는 게 정신건강에 이롭습니다ㄷㄷ
-
빗방울
2026.10.31 16:13
ㄹㅇㅋㅋ 렌더링 횟수 늘어나면 브라우저 비명 지를듯요 그냥 한 번에 넣는 게 국룰임ㄷㄷ
-
빗방울
2026.10.31 16:21
ㄹㅇㅋㅋ 데이터 좀만 많아져도 프레임 드랍 오질듯요 그냥 한 방에 처리하는 게 국룰임ㄷㄷ
-
빗방울
2026.10.31 18:02
리액트 상태 업데이트가 비동기라 처음 접하면 진짜 당황스럽죠ㅋㅋ
공식 문서에 클로저 관련 내용 한번 읽어보시면 이해 더 빠를듯요ㄷㄷ
-
빗방울
2026.10.31 21:21
근데 이거 나중에 useEffect 같은 데서 엮이면 더 골치 아파짐ㅋㅋ
미리미리 습관 들여놓으시는 게 나을 듯요ㄷㄷ
-
빗방울
2026.10.31 22:41
이거 나중에 상태 관리 라이브러리 쓰면 더 헷갈릴 수도 있음ㅋㅋ 일단 리액트 렌더링 사이클 개념부터 확실히 잡아두시는 거 추천드림ㄷㄷ
모든 이야기1455
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
총 1455개의 이야기
함수형 업데이트 쓰면 해결될듯요
setItems(prev => [...prev, item]) 이렇게 바꿔보세요ㅋㅋ