[React] 22.07.12 회고록

 

렌더링 할때 State를 변경하면 Warning이 뜬다.

 

function ChatRoom() {
  const path = window.location.pathname.split("/")[2];
  const [chRoomId, setChRoomId] = useRecoilState(getChRoomId);
  useEffect(() => setChRoomId(path), [path, setChRoomId]);
  const mainUser = useRecoilValue<IUserInfo>(getUserInfoSelector);
  const chatParticipants = useRecoilValue<IParticipant[]>(getChRoomUser);
  const myIndex = chatParticipants.findIndex(
    (chatParticipant) => chatParticipant.userId === mainUser.id,
  );
  const mainUserAuth = chatParticipants[myIndex]?.authority;

  const chRooms = useRecoilValue<IChatRoom[]>(getChatRoom);
  const roomIndex = chRooms.findIndex(
    (chRoom) => chRoom.chatRoomId === +chRoomId,
  );
  const title = chRooms[roomIndex]?.title;

  return <><>;

현재는 useEffect를 사용하여 채팅방의 id를 변경하고 있다. 처음에 useEffect를 사용하지 않고 setChRoom를 사용했더니 Cannot update a component (`Batcher`) ... 이런 문구의 Warning이 떴었다. 렌더링시 state를 변경하고 싶다면 useEffect로 감싸자. useEffect 안에 dependency로 들어간 path와 setChRoomId는 warning이 뜨길래 집어넣었더니 warning이 뜨지 않아서 저대로 두었다. 정확한 이유는 설명할 수 없을 것 같다..  또 처음에  atom의 default값을 "0"으로 설정해놓았는데 useEffect를 거는 바람에 0에서 api를 한번 요청하고 useEffect에서 atom의 값을 변경한 이후 변경된 값을 가지고 api를 요청을 한다.  여기서 mainUserAuth와 title에 값을 대입할 때 ?.(옵셔널 체이닝 연산자)를 사용한 덕분에 에러가 뜨지 않는 것 같다. 개인적인 생각에는 api를 호출하는 다른 변수들은 어차피 없는 값이 대입되기 때문에 실행되지 않거나 에러값이 담겨 있을 것 같다. 생각난 김에 한번 찍어 보았다.

 

 

자세히 보면 room id = 하고 room id가 바뀌는 부분이 있다.

 

 

그냥 기록..

아톰을 이용해서 roomId를 변수로 api요청을 해볼까 하는 생각을 해보았는데 그럭저럭 잘 된 것 같다.

 

import { reqUserInfo } from "./getUserInfo";
import { atom, selector } from "recoil";
import { getApi } from "../api/getApi";

export interface IParticipant {
  userId: number;
  nickname: string;
  authority: number;
}

export const getChRoomId = atom({
  key: "chRoomId",
  default: "0",
});

export const getChRoomUser = selector({
  key: "chat/participant/roomId/get",
  get: async ({ get }) => {
    get(reqUserInfo);
    const roomId = get(getChRoomId);
    console.log("room id = ", roomId);
    return await getApi("chat/participant/" + roomId).catch((err) =>
      console.log(err),
    );
  },
});

 

남들이 보면 뭔코드인가 할 것 같다. 뭐 아무튼 혼자 생각했던 것을 구현해보았더니 되어서 기분이 좋았다. 나머지도 api를 바꿔가면서 요청해야 할 때 이 방식을 사용하면 될 것 같다. 그래서 기록해두기 위해 남겨둔다.

 

오늘은 뭔가 블로그에 기록한 것이 적은 것 같다. 근데 시간은 10시간이나 걸렸다.. 이 문제들을 해결하는 데..  으아...

내가 바보인건가.. 너무 어려운건가.. 깔깔깔..