[react & typescript]리코일 찍먹(?) 사용기 - 로그인한 유저 정보 저장하여 전역 상태로 관리하기(feat. recoil)

상태관리 라이브러리를 프로젝트에서 사용해본 것은 이번이 처음이였다. 이전에 redux는 잠깐 배워봤었으나 사용법이 간단하지만은 않아(?) 상태관리와는 친하지않은 상태였다.

그래서 이번 프로젝트에서도 가끔씩 props 드릴링을 하며,,, 상태관리와는 데면데면한 사이를 유지하고 있었다. 

하지만 상태관리를 써야만하는 상황이 왔으니, 그것은 바로 Post & Comment를 작성자만 수정/삭제가 가능하도록 만들어야하는 것이였다! 

우리 프로젝트에서는 구글 및 카카오 로그인을 사용하였다.

const [searchParams] = useSearchParams();:

useSearchParams는 리액트의 훅으로, 현재 URL의 쿼리 파라미터 정보를 가져올 수 있게 해준다. 이 코드에서 searchParams는 URL의 쿼리 파라미터 정보를 담는 객체를 나타낸다.

const Authorization = searchParams.get("access_token") || null;:

searchParams.get("access_token")은 searchParams 객체에서 이름이 "access_token"인 쿼리 파라미터의 값을 가져오는 메서드이다. 만약 "access_token" 쿼리 파라미터가 없다면 null을 반환하고 그 값을 Authorization 변수에 할당한다.

즉, 현재 페이지의 URL에서 access_token이라는 쿼리 파라미터 값을 추출하여, 만약 해당 값이 존재한다면 Authorization 변수에 할당하고, 값이 없으면 null을 할당한다.

const navigate = useNavigate();
const [searchParams] = useSearchParams();
const Authorization = searchParams.get("access_token") || null;
useEffect(() => {
    if (Authorization) {
      localStorage.setItem("Authorization", Authorization);
      navigate("/");
      window.location.reload();
    }
}, []);

const handleKakaoLogin = () => {
    window.location.href =
      "서버 url/oauth2/authorization/kakao";
};
const handleGoogleLogin = () => {
    window.location.href =
      "서버 url/oauth2/authorization/google";
};

로그인 시 외부링크로 이동 후(카카오 / 구글 로그인) 로그인 처리가 완료되면 헤더에 로그인한 유저의 access 토큰이 반환되므로, useSearchParams로 헤더에서 로그인한 유저의 토큰을 가져와 키가 "Authorization"이고 값이 토큰이 되도록 로컬 스토리지에 저장 후 도메인 페이지로 리다이렉트되도록 한다.

로그인한 유저 정보를 저장하는 atom 파일을 만든다.

'useInfoState' 는 로그인 유저 정보 값을 갖는 상태이다.

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

const userInfoState = atom({
  key: "userInfoState",
  default: {},
  effects_UNSTABLE: [persistAtom],
});

const isLoggedInState = atom({
  key: "isLoggedInState",
  default: false,
});

export { userInfoState, isLoggedInState };

프로젝트를 하며 시간적 여유가 없어 리코일의 개념에 대해서는 제대로 파악하지 못한 채 급한 불을 끄기위해 구글링만으로 구현했다.

프로젝트 종료 후 리코일과 타입스크립트에 대해서 심도있게 공부해야겠다ㅠㅠ

도메인 페이지로 리다이렉트 되면 로컬스토리지에 "Authorization" 의 값을 가져와 리코일을 사용해 전역 상태 값으로 관리해주면 된다.

const token = localStorage.getItem("Authorization");
  const setUserInfo = useSetRecoilState(userInfoState);
  const { axiosData: getUserInfo, responseData: memberData } = useAxios(
    getMyData,
    [token],
    true
  );
  useEffect(() => {
    if (token) {
      getUserInfo();
    }
  }, [token]);

  useEffect(() => {
    if (memberData) {
      setUserInfo(memberData);
    }
  }, [memberData]);

또 한 가지 알게된 사실은 하나의 컴포넌트에 useEffect를 1개 이상 사용해도 된다는 것이였다.

종속성 배열에 들어갈 값이 여러 개이고 각각의 값이 바뀌었을 때 처리해줄 로직이 다르다면 useEffect를 여러 번 사용해도 된다고 한다(구글링 + 약간의 뇌피셜이라 확실치는 않지만).

해당 코드를 사용하면 로그인 한 유저의 정보를 전역 상태로 관리하여 타 컴포넌트에서도 사용할 수 있게 된다.

const userInfo = useRecoilValue(userInfoState);

내가 작성하지 않은 글에는 수정/삭제 버튼이 뜨지 않는다! 야호!

타유저 작성 post에는 수정/삭제 버튼 없음

댓글 수정/삭제에도 해당 기능을 사용하여 구현했다.

 

참고한 블로그)

https://kill-xxx.tistory.com/entry/React-Recoil%EC%9D%B4-%EB%AD%94%EB%8D%B0-%EB%8C%80%EC%B2%B4-React%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Recoil-%EA%B0%9C%EB%85%90-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

[React] Recoil이 뭔데 대체! / React를 위한 상태 관리 라이브러리 Recoil 개념 쉽게 알아보기