[React] setState

setState는 비동기입니다.

그래서 기존의 상태 값에 새로운 값을 추가하기 위해서는 다음과 같은 코드로 작성해야합니다.

틀린 예시

const [chat, setChat] = useState([]);
socket.on('message', ({name, message}) => {
  setChat([...chat, {message, user}])
})

위와 같이 작성할 경우, chat이 누적이 되지 않고 단순히 값만 변경되는 현상 발생

 

올바른 예시

const [chat, setChat] = useState([]);
socket.on('message', ({name, message}) => {
  setChat(prev => [...prev, {name, message}])
})

https://ko.reactjs.org/docs/hooks-reference.html