[TIL] 내일배움캠프 72일차 - 리액트 이전 상태

 

 

오늘의 학습 키워드📚

배열 상태 업데이트

채팅 관련 UI를 작업하던 중 알게 된 내용이다.

리액트에서는 특정 변수의 상태 변화를 useState라는 포맷?으로 관리한다.
어떤 값의 상태와 상태를 변경하는 set 메소드로 이루어져있다.

해당 값이 단일 값인 경우 그냥 set 메소드를 실행하면 상태 변화가 되지만 배열 같이 여러 값을 가진 상태라면 값을 추가하는 방식으로 구현해야 한다.
하지만 useState는 상태를 변경하는 것이기에 add 같은 함수가 없는데 그래서 리액트에서는 이전 상태라는 개념을 제공한다.

    const [chatMessages, setChatMessages] = useState(messages);

채팅 메세지에 대한 상태이다. 처음에는 채팅 방에 있는 메세지들을 받아오기에 JSON 배열 형태로 들어오게 된다.
하지만 STOMP 이벤트로 메세지를 받는 값은 단일 JSON 값이기에 바로 상태 변화에 사용할 수 없는데 이때 이전 상태를 통해 값을 추가할 수 있다.

    useEffect(() => {
        if (receiveMessage) {
            setChatMessages(prev => [...prev, receiveMessage]);
        }
    }, [receiveMessage])

set 메소드 내에서 (이전 상태) => [...이전 상태, 추가할 값] 이런 방식으로 사용한다.

참고

https://velog.io/@rachel490/sdf-qd9oatqs

 🚀 SetState에 prevState를 사용하는 이유

---

오늘의 회고💬

계속 UI를 구현하는 부분에서 막혔었는데 천천히 다시 구성하다 보니 어느정도 틀이 잡힌 느낌이다.

 

내일의 계획📜

채팅방 부분을 빨리 마무리하고 커뮤니티 부분도 해야 한다... 바쁘다 바빠....