리액트에서 setState로 상태 값 변경시 바로 적용 문제

Question

리액트에서 버튼을 클릭하면 상태값이 변경되고, 변경된 상태값을 바로 적용하는 함수를 만들었는데, 함수 안에서는 변경된 값이 적용되는게 아니라 변경 전의 값이 적용되었습니다. 코드로 보여드리자면,버튼 누르기 전에는 import React, { useState } from 'react';import './App.css'; function App() { const [item, setItem] = useState({ name: "", color: "", size: 10 }) const [changeItem, setchangeItem] = useState(item); const onClickChangeItem = () => { setItem((prev) => ({ ...prev, name: "haha", color: "blue", size: 30 })); console.log(item); setchangeItem(item); console.log(changeItem); } console.log(item);//{name: '', color: '', size: 10} console.log(changeItem);//{name: '', color: '', size: 10} return (

);} export default App; 함수 밖에서 item과 changeItem이 변경전 초깃값으로 콘솔로 확인되고, 버튼을 클릭하면,import React, { useState } from 'react';import './App.css'; function App() { const [item, setItem] = useState({ name: "", color: "", size: 10 }) const [changeItem, setchangeItem] = useState(item); const onClickChangeItem = () => { setItem((prev) => ({ ...prev, name: "haha", color: "blue", size: 30 })); console.log(item);//{name: '', color: '', size: 10} setchangeItem(item); console.log(changeItem);//{name: '', color: '', size: 10} } console.log(item);//{name: 'haha', color: 'blue', size: 30} console.log(changeItem);//{name: '', color: '', size: 10} return (

);} export default App; 함수 안에서의 item 값은 setItem으로 변경한 후인데도 변경 이전의 값이 출력되고, 바로 setChangeItem에 변경된 값이 적용 안되어, changeItem도 변경 전의 값으로 되어있었습니다. 함수 안에서 변경된 item 값을 바로 적용하고 싶은데, 어떻게 하면 될까요? 제가 어떤 부분을 놓치고 있는지 확인해 주시면 감사하겠습니다.

토끼왕 · Answer

setState는 비동기 함수입니다. setState의 콜백 함수를 사용해 주세요

리액트에서 setState로 상태 값 변경시 바로 적용 문제

1개의 답변

Q&A 목록