[리액트] Socket.io를 이용해 여러명에서 플레이 할 수 있는 끝말잇기,소켓io, 리덕스 그리고 리덕스 사가 간단 정리
이전 socket.io를 이용한 채팅방기능으로 끝말잇기 게임을 만들어 봤습니다.
리액트,리덕스,리덕스 사가 그리고 소켓을 사용했습니다.
우선 리액트 토이프로젝트를 만들면서 항상 사용했던 소켓io와 리덕스 그리고 리덕스 사가를 정리해보겠습니다.
그리고 끝말잇기 토이프로젝트 설계에 대해 이야기 하겠습니다.
리덕스란 리액트에서 사용하는 상태관리 라이브러리 입니다.
리액트에서는 props를 이용해 부모에서 자식으로 데이터를 전달합니다.
하위 컴포넌트에서 데이터를 사용해야 하는 경우, 반드시 부모컴포넌트에서 데이터를 갖고있어야 하므로, 구조가 복잡해지면 데이터를 관리하기 힘들어지는 단점이 있습니다.
따라서 리덕스를 사용해서 데이터를 전역으로 관리하고(state), 데이터가 변화할때 사용하는 Action을 모두 Store의 리듀서 안에서 보관하게 됩니다.
컴포넌트 내부에서 필요한 데이터를 리듀서에서 셀렉터를 이용해 가져올 수 있고,
필요한 액션을 디스패치할 수 있습니다.
리덕스에는 세가지 규칙이 있습니다.
1. 하나의 애플리케이션에는 반드시 하나의 스토어만 존재합니다.
하나의 스토어 내부에서 여러개의 리듀서를 두어 구분할 수 있습니다.
2. 상태는 읽기 전용입니다.
상태에 불변성을 유지하기 위해서 리덕스에서 내부적으로 상태가 변경되어있는지 검사를 합니다.
3. 리듀서는 순수함수여야 합니다.
리듀서는 state와 action을 인자로 받는데, 이때 이전의 상태를 변경하면 안되고, 새로운 객체를 만들어 반환해야합니다.
불변성을 유지하기 위해서입니다.
저는 리덕스 툴킷을 사용해서 불변성을 유지했습니다.
리덕스 툴킷에서는 immer 라이브러리가 포함되어있기 때문입니다.
따라서 부수효과가 발생하는 일부 로직들은 리듀서가 아닌 리듀서 외부에서 처리해야합니다.
예를들어 API연결 등은 미들웨어에서 처리해야합니다.
액션이 디스패치 되었을때, 리덕스 미들웨어는 그 액션이 디스패치되는 상황을 인지하고, 미들웨어에서 로직을 처리합니다.
저는 이 리덕스 미들웨어를 쓰기위해 리덕스 사가 Redux-saga를 사용했습니다.
소켓 IO
클라이언트의 요청으로 서버가 응답하는 단방향 통신인 http통신과 다르게, 소켓통신은 클라이언트 서버 모두 메세지를 보낼 수 있습니다.
그리고 socket.io는 웹소켓을 이용한 라이브러리로, 웹소켓을 편리하게 사용할 수 있게 해줍니다.
위 모두의 내용을 반영한 끝말잇기 프로젝트의 구조입니다.
아래는 실행화면입니다.
