Redux 2

3차 팀 프로젝트 채팅 기능 트러블 슈팅 #1 (부제: 내 채팅이 두 번 보내져요! ㅠㅠ)

1. 문제 발생웹소켓을 연결하고 채팅 테스트를 하던 중특정 컴퓨터에서 메시지가 두 번 보내지는 오류가 있었다.그런데 다시 새로고침을 하면 메시지가 한 개로 보였다.DB의 채팅 메시지 테이블에도 메시지는 하나만 저장되어있었다. 2. 원인 추론메시지의 상태를 저장하는 것으로 redux-toolkit 을 사용했다.거기서 메시지를 보내고 받는 것을 setMessages 라는 액션을 이용해서redux 의 messages 라고 지정된 state 에 저장했다.그리고 그 messages 는 메시지를 렌더링 하는 컴포넌트에서 map 메서드를 이용해서출력되도록 구성했다.  return ( { messages?.map((message, index) => ( )) ..

[새싹x코딩온] 웹 개발자 부트캠프 과정 15주차 회고 | Redux

1. 들어가며React 에서 Redux 를 사용하여 상태 관리하기2. ReduxRedux는 자바스크립트에서 상태 관리를 하기 위한 라이브러리다.React에서 상태 관리를 하기 위해 많이 사용하는 라이브러리다. React에서 상태 관리를 위해 사용하는 이유는 프로젝트를 하다보면 컴포넌트가 많이 만들고 관리하게 되는데, 그러다보면 props 지옥에 빠지는 경우가 생긴다!이를 해결하기 위해 Redux 는 store라는 개념을 도입하여 전역으로 상태를 관리할 수 있게 하기 위해 사용한다. Redux 용어 정리 1. Store 상태가 관리되는 공간현재 애플리케이션 상태(state) 와 reducer 가 들어있음** 한개의 프로젝트에는 하나의 스토어** 스토어에 있는 데이터는 컴포넌트에서 직접 조작 X 2. Act..

Study/React 2024.08.19