ksw_devlog
TIL 03.06 - 최종 프로젝트 5주차 본문
React Recoil을 활용하여 클라이언트 서버 관리
react query로 서버 데이터를 불러오고 recoil로 클라이언트 데이터를 관리할려고 한다.
1. atom
import { atom } from "recoil";
const postState = atom({
key: 'postState',
default: [],
});
export default postState;
전역으로 사용할 파일을 생성
2. 서버에서 불러온 데이터를 state에 넣어주기
import Router from './shared/router';
// import { init } from '@amplitude/analytics-browser';
import GlobalStyle from './components/GlobalStyle';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import postState from './recoil/postState';
import usePosts from './hooks/usePost';
import authState from './recoil/authState';
import { authService } from './common/firebase';
import testteamPageState from './recoil/testteamPageState';
import useTestTeam from './hooks/useTestTeam';
// init = apikey, userId 를 받으며 비회원이어도 트레킹할 수 있도록 'user@amplitude.com' 생략
function App() {
const setAuthState = useSetRecoilState(authState);
// post 컬렉션
const setPostState = useSetRecoilState(postState);
const post = usePosts();
// console.log(post.data)
// teamPage 컬렉션
const setTeamPageState = useSetRecoilState(testteamPageState);
const teamPage = useTestTeam();
// console.log(teamPage.data)
useEffect(() => {
authService.onAuthStateChanged((user) => {
if (user) {
setAuthState({
uid: user.uid,
displayName: user.displayName,
photoURL: user.photoURL,
});
} else {
return;
}
});
setPostState(post.data);
setTeamPageState(teamPage.data);
}, [post.data, teamPage.data]);
return (
<>
<GlobalStyle />
<Router />
</>
);
}
export default App;
-> 최상단 컴포넌트에서 설정해줘야 전역적으로 사용가능하다고 한다.
3. 활용
import { useRecoilValue } from 'recoil';
const postList = useRecoilValue(postState);
const teamPage = useRecoilValue(testteamPageState);
...
// 자신이 개설한 팀 데이터(리더)
const myOnGoingMeeting = teamPage?.filter((item) =>
item.teamLeader?.uid?.includes(authService?.currentUser?.uid),
);
...
// myAppliedteamID가 각각 들어있는 postList 추출
const appliedMeeting = postList?.filter((item) =>
myAppliedteamID?.includes(item.teamID),
);
'TIL' 카테고리의 다른 글
TIL 03.08 - 최종 프로젝트 5주차 (0) | 2023.03.09 |
---|---|
TIL 03.07 - 최종 프로젝트 5주차 (0) | 2023.03.07 |
WIL 18주차 - 최종 프로젝트 4주차 (0) | 2023.03.06 |
TIL 03.03 - 최종 프로젝트 4주차 (0) | 2023.03.05 |
TIL 03.02 - 최종 프로젝트 4주차 (0) | 2023.03.03 |