Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

ksw_devlog

TIL 03.06 - 최종 프로젝트 5주차 본문

TIL

TIL 03.06 - 최종 프로젝트 5주차

kimcoach 2023. 3. 7. 00:26
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),
  );