Recoil을 활용한 로그인 상태 관리

저번 글에 이어서 이번엔 recoil 을 활용하여 써보려고 한다.

이게 메인창이다. 우리는 로그인이 안된 상태에서는 로그인해주세요 버튼과 프로필 이모티콘을 눌렀을때

이 모달창을 띄워서 사용자가 로그인을 할 수 있도록 할 것이다. 그리고 로그인이 된 상태면 프로필 이모티콘을 눌렀을때 사용자의 프로필을 조회할 수 있는 페이지를 띄울 것이다.

로그인하기

카카오 로그인 구현 -1 글에서 진행했던 로그인을 한 뒤 서버에서 JWT 토큰을 받아와 2개의 토큰과 username, userId를 각각 localStoarage에 저장해주었다.

const ApiCall = async () => {
        try {
            const response = await axios.get(`${DEFAULT_SERVER_URL}/api/v1/oauth/kakao/authorization?code=${code}`);
            console.log('response >>', response);

            localStorage.setItem('userId', response.data.result.userId);
            localStorage.setItem('userName', response.data.result.userName);
            localStorage.setItem('accessToken', response.data.result.accessToken);
            localStorage.setItem('refreshToken', response.data.result.refreshToken);
        } catch (err) {
            console.log('Error >>', err);
        }
    };

    useEffect(() => {
        ApiCall();
    }, []);

이렇게 localStorage에 4개의 값이 저장된걸 확인해볼 수 있다.
이후에 localStoage에 userName을 key값으로 가진 값이 null이 아니면 로그인이 된 상태이기 때문에 이를 이용하여 로그인 여부를 결정했다.

const userName = localStorage.getItem('userName');

 if (userName !== null) {
        setLogin(true);
 }

그러면 atom의 default value는 true로 변하며 로그인 된 상태가 된다.

우리의 목표는 로그인 여부에 따라서 뜨는 창이 달라지는 것이였다. isLogin 값이 true일때는 userprofile로 link를 걸어주면 되지만 로그인이 안되있을때는 위의 사진과 같이 로그인을 하라는 창을 띄워야한다. 구글링 끝에 react에서 제공하는 modal을 활용하면 쉽게 해결할 수 있었다.

const [modalHandle, setModalHandle] = useState(false);

const showModal = () => {
        setModalHandle(true);
    };

modal 창의 여부를 useState를 사용해서 관리해주고

<CgProfile onClick={isLogin ? onClickProfile : showModal} 

{modalHandle && <ModalPage setModalHandle={setModalHandle} />}/>

프로필 이모티콘을 눌렀을때 로그인 상태이면 profile조회 페이지로 link하게 해주고 로그인 상태가 아니라면 showModal 함수를 실행해서 modalHandle 값을 true로 바꿔준다. 그러면 미리 만들어둔 <ModalPage / > 컴포넌트가 실행되면서 로그인 모달창이 띄워진다.

로그인 뿐만 아니라 다크모드 등 전역적으로 관리할일이 종종있는데 recoil을 사용하면 좀 더 간편하게 관리 할 수 있을거같다.