react에서 게시글 생성 실시간 적용하기

현재 진행중인 프로젝트에서 채팅방을 생성한 뒤

지금 생성되어 있는 채팅방 리스트를 확인하는 기능을 구현해야 했다.

 

나는 아래와 같이 modal창을 이용해서 채팅방을 생성하도록 설정하였기 때문에

채팅방 생성 후 따로 라우팅을 시키지 않는 상태였다.

그래서 채팅방을 생성한 뒤에 별도로 리렌더링해주지 않는 한

아래와 같이 생성된 채팅방을 확인할 수 없었다.

나는 채팅방 정보를 useEffect를 이용해 받아오고 있었기 때문에

아래와 같이 rerender라는 state를 이용해

useEffect가 실행되는 트리거를 만들어 페이지를 리렌더링 해주었다.

(참고로 리액트로 만든 SPA는 state가 변경되면 페이지가 리렌더링 된다.)

  useEffect(() => {
    axios
      .get("http://localhost:8080/chat/rooms")
      .then((res) => {
        console.log("채팅방 get요청");
        console.log(res.data);
        setData(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [rerender]);

아래와 같이 채팅방을 생성하는 POST 요청을 보낸 뒤

요청이 성공적으로 처리되면 setRerender 함수를 이용해

rerender state를 변경해주었고, 곧바로 useEffect가 실행되면서

서버의 채팅방 리스트를 다시 불러오게 된다.

    axios
      .post("http://localhost:8080/chat/rooms", formData)
      .then((res) => {
        console.log(res.data);
        setRerender(Math.random());
      })
      .catch((err) => {
        console.log(err);
      });

그럼 아래와 같이 내가 생성한 채팅방이 보이게 된다.