Recoil

Recoil을 사용하여 로그인 정보를 다른 컴포넌트에 전달

// Atom.jsx
import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';
const { persistAtom } = recoilPersist({
    key: 'session',
    storage: sessionStorage,
});

export const loginAtom = atom({
    key: 'loginAtom',
    default: '',
    effects_UNSTABLE: [persistAtom],
});

// Selector.jsx
import { selector } from 'recoil';
import { loginAtom } from './Atom';

export const loginSelector = selector({
    key: 'loginSelector',
    get: ({ get }) => {
        const loginUser = get(loginAtom);
        return loginUser;
    },
});

SignIn 컴포넌트에 Recoil 연결

// SignIn.jsx
import { useRecoilState } from 'recoil';
import { loginAtom } from '../Recoil/Atom';
...
const [loginUser, setLoginUser] = useRecoilState(loginAtom);
...
// 로그인 성공시
setLoginUser(userInfo);

Recoil 연결 확인

로그인한 유저 정보를 보내줄 컴포넌트에 Recoil 연결

// MyPage.jsx
import { useRecoilValue } from 'recoil';
import { loginSelector } from '../Recoil/Selector';
...
const loginUser = useRecoilValue(loginSelector);
...
useEffect(() => {
  setUser(loginUser);
}, [loginUser]);

마이 페이지에서 정보 나오는지 확인

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 13주차 블로그 포스팅