렌더링 할때 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를 호출하는 다른 변수들은 어차피 없는 값이 대입되기 때문에 실행되지 않거나 에러값이 담겨 있을 것 같다. 생각난 김에 한번 찍어 보았다.
그냥 기록..
아톰을 이용해서 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시간이나 걸렸다.. 이 문제들을 해결하는 데.. 으아...
내가 바보인건가.. 너무 어려운건가.. 깔깔깔..
'Study > ft_transcendence' 카테고리의 다른 글
[React] 22.07.14 회고록 (0) | 2022.07.14 |
---|---|
[React] 22.07.13 회고록 (0) | 2022.07.13 |
[React] 22.07.11 회고록 (0) | 2022.07.11 |
[CSS] CSS 조금 더 깊게 맛보기 (노마드 코더) (0) | 2022.06.17 |
[CSS] CSS 맛보기 (노마드코더) (0) | 2022.06.14 |
댓글