231208 TIL

React 환경에서 사용자 로그인 상태에 따른 상호작용

흔히 사용자의 입장에서 로그인 상태에 따른 상호작용으로 접할 수 있는 것이 뭐가 있을까?

사용자가 로그인이 안된 상태에서 로그인이 필요한 작업을 수행하려고 하면 만날 수 있는 창일 테다.

뭐 어떻게 보면 가끔 이런 것이 귀찮게 여겨질 때도 있었지만, 프론트엔드를 공부하고나서는 이게 다 보안과 사용자를 위해서 하는 과정이라는 걸 알게 됐다.

간단한 예시를 위해 redux-toolkit, redux-thunk 과제로 진행한 코드를 가져와보겠다.

시나리오는 이렇다.

로그인된 사용자가 AddButton을 클릭하면, 모달창이 팝업될 것이다.
로그인하지 않은 사용자가 AddButton을 클릭하면, 모달창 대신 Alert창이 뜰 것이다.

---

1. 먼저 로그인된 사용자의 상태를 판단하기 위한 로직이 필요하다.

<script>
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const __isLogin = createAsyncThunk(
  //action value
  "isLogin",
  //callback
  (payload, thunkAPI) => {
    thunkAPI.dispatch(isLogin(payload));
  }
);

const initialState = {
  isLogined: false,
  userId: "",
};

const usersSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    isLogin: (state, action) => {
      console.log("auth: ", action.payload);
      return action.payload;
    },
  },
});

export const { isLogin } = usersSlice.actions;
export default usersSlice.reducer;
</script>

• isLogined: false 를 초기값으로, 즉 기본 상태는 로그인 안 된 상태라는 거다.
• 응당 그에 따라오는 userId도 비워둬야 한다.

2. 그 다음엔 사용자와의 작용이 일어날 AddButton.

<script>
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import { showCustomModal } from "../../redux/modules/customModalSlice";
import { __isLogin } from "../../redux/modules/authSlice";

function AddButton() {
  const dispatch = useDispatch();
  const isLogined = useSelector((state) => state.authSlice.isLogined);

  const handleAddButtonClick = () => {
    if (!isLogined) {
      alert("로그인이 필요합니다. 로그인부터 해주세요.");
      dispatch(showCustomModal(false));
    } else {
      dispatch(showCustomModal(true));
    }
  };

  return (
    <>
      <StBtn onClick={handleAddButtonClick}>+</StBtn>
    </>
  );
}

const StBtn = styled.button`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: white;
  cursor: pointer;
`;

export default AddButton;
</script>

• authSlice에 작성된 isLogin 로직을 import 해준다.
• 그리고 useSelector로 녀석을 데리고와 사용할 준비를 해준다.
• 그런 다음 버튼에 적용시킬 로직을 작성한다. ( handleAddButtonClick )
• if (!isLogined) = (사용자가 로그인하지 않았다면), alert과 함께 모달창이 뜨는 것을 방지해준다.
• else = (사용자가 로그인했다면), 모달창을 팝업시켜 그 다음 작업을 진행할 수 있도록 한다.

물론 여기서 더 유저친화적으로 작성할 수도 있을 테다.

예를 들면 단순히 alert창이 아니라, 아예 로그인 페이지로 이동시켜준다던가 혹은 로그인 모달창을 띄워주면 더욱 유저친화적일 것이다.
이러한 작업은 단순히 사용자의 로그인 상태 기반 뿐만 아니라 다양한 곳에도 쓰이리라 짐작한다.
그러므로 짚고 넘어갈 필요성이 있다고 생각했다.