[ Intro ] 로그인 회원정보 recoil 테스트

Happhee commented 2 years ago

🔥 Related Issues

close #58

🎡 작업 내용

[x] 소셜 로그인 후 유저정보 atom으로 구독하기

✅ PR Point

📄 core/atom.ts

전역 저장소를 만드는 공간이라고 생각하면 될 것 같아요 !

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist'; 
import { PostLoginBody, UserData } from '../types/user';
// ✨ 페이지가 변경되더라도 상태관리를 유지
const { persistAtom } = recoilPersist();

export const userInfoState = atom<PostLoginBody>({
  // ✅  내부적으로 atom을 식별하는데 사용되는 고유한 문자
  key: 'userInfo',
 // ✅ atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector.
  default: {
    snsId: 'nori@naver.com',
    provider: 'naver',
    email: 'nori@naver.com',
  },
  effects_UNSTABLE: [persistAtom],
});

📄 pages/login.tsx

사용 방법

useRecoilState 👉 atom에서 정의한 전역상태( 여기서는 userInfoState)를 state처럼 관리

useResetRecoilState 👉 atom에서 정의한 전역상태 초기화

// ✨ 요기!!
const [userInfo, setUserInfo] = useRecoilState(userInfoState);
const resetList = useResetRecoilState(userInfoState);

console.log(userInfo);
const handleLogin = async (social: string) => {
if (data?.user) {
  const userLoginData = {
    snsId: data?.user.email,
    provider: social,
    email: data?.user.email,
  } as PostLoginBody;
  const login = await userLogin(userLoginData);
  if (login.data) {
  // ✨저장 방법 동일 
    setUserInfo(userLoginData);
  }
}
};

👀 스크린샷 / GIF / 링크

https://user-images.githubusercontent.com/79238676/179336365-0ccadd88-bd3d-4a0c-a89c-5a7aeed2d292.mov

📚 Reference

say-young516 commented 2 years ago

수고했습니다! 이고는 로컬스토리지 대신에 쓰는 건강?

Happhee commented 2 years ago

@say-young516 아니요!! 이건 전역상태관리이고! 로컬스토리지는 토큰때문에 쓰는거에여!

Brokyeom commented 2 years ago

확인완료! recoil로 관리하는 상태들 게시글이나 댓글에서도 게속 써야하니까 얼른 자세하게 공부해야겠다

nori-dongsan / nori-client

[ Intro ] 로그인 회원정보 recoil 테스트 #59