[TIL/React] 2023/08/15 🇰🇷

LogIn 상태, 전역에서 관리하기(feat. Redux Toolkit) 🟠

src/pages/LogInPage.js 🔵

import React, { useState, useEffect } from "react";
import styled from "@emotion/styled";
import { loginUser } from "../modules/authSlice";
import { useNavigate } from "react-router-dom";
import ComponentWrapper from "../components/common/ComponentWrapper";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";

const LogInTitle = styled.p`
  text-align: center;
  margin: 0px;
  font-weight: bolder;
  font-size: 40px;
`;

const LogInFormWrapper = styled.div`
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  /* min-width: 375px;
  width: 100%;
  height: 500px; */
  /* margin: 0 auto; */
`;

const FormLabel = styled.p`
  font-size: 16px;
  margin-bottom: 8px;
`;

const FormInput = styled.input`
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  max-width: 600px;
`;

const SubmitButton = styled.button`
  background-color: black;
  color: #fff;
  padding: 20px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bolder;
  cursor: pointer;
  width: 100%;
  &:hover {
    background-color: #fff;
    color: black;
    border: 2px solid black;
  }
`;

const LogInPage = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

  const goToSignUp = () => {
    navigate("/signup");
  };

  const handleSignIn = (e) => {
    e.preventDefault();
    dispatch(loginUser({ email, password }));
  };

  useEffect(() => {
    if (isAuthenticated) {
      navigate("/");
    }
  }, [isAuthenticated]);

  return (
    <ComponentWrapper
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* 모바일 900px 이하 */}

      <form onSubmit={handleSignIn}>
        <LogInTitle>로그인</LogInTitle>
        <LogInFormWrapper>
          <h2>이메일 로그인</h2>

          <FormLabel>Email</FormLabel>
          <FormInput
            type="email"
            placeholder="아이디(이메일 주소)를 입력하세요"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

          <FormLabel>Password</FormLabel>
          <FormInput
            type="password"
            placeholder="비밀번호를 입력하세요"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />

          <SubmitButton>로그인</SubmitButton>
          <div style={{ display: "flex", columnGap: "8px" }}>
            <p style={{ fontWeight: "bolder" }}> 정육각이 처음이신가요?</p>
            <p
              style={{
                color: "red",
                fontWeight: "bolder",
                cursor: "pointer",
              }}
              onClick={goToSignUp}
            >
              회원가입하기
            </p>
          </div>
        </LogInFormWrapper>
      </form>
    </ComponentWrapper>
  );
};

export default LogInPage;

src/modules/authSlice.js 🔵

// authSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { auth } from "../firebase";
import { signInWithEmailAndPassword } from "firebase/auth";

// Firebase 인증을 사용하여 사용자 로그인 처리
export const loginUser = createAsyncThunk(
  "auth/loginUser",
  async (credentials) => {
    const { email, password } = credentials;
    console.log(credentials);

    try {
      const userCredential = await signInWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.log(userCredential);
      return userCredential.user.email;
    } catch (error) {
      console.log(error);
      throw error;
    }
  }
);

const authSlice = createSlice({
  name: "auth",
  initialState: {
    user: null,
    isAuthenticated: false,
  },
  extraReducers: (builder) => {
    builder.addCase(loginUser.fulfilled, (state, action) => {
      console.log(action.payload);
      state.user = action.payload;
      console.log(state.user);
      state.isAuthenticated = true;
    });
  },
});

export default authSlice.reducer;

해결 과정 🟢

1. 개요

어떤 action을 행함에 있어, 특히 개발자는 그냥... 따위의 대답을 해서는 안 된다. 전역 상태 관리에 대한 근거부터 서술하고자 한다.

전역 상태 관리는, 소프트웨어 애플리케이션 내에서 여러 컴포넌트나 모듈 간에 공유되는 데이터와 상태를 효율적으로 관리하는 방법론 중 하나이다. 복잡한 데이터를 하나의 파일에서 관리함으로써 코드의 예측 가능성과 디버깅의 효율성, 즉 생산성을 제고하는 데에 그 본질이 있다.

2. 코드 수정 및 에러

위 코드는 로그인의 form 태그에 연동되어 있는 함수이다. 핵심은 dispatch이다. form 태그 내부에서 제공하는 email과 password를 reducer로 전달하는 정도의, 최소한의 역할만을 수행하고 있다. 전역 상태의 본질에 맞게 데이터와 상태에 대한 가공은 해당 함수에서 이루어지지 않을 것이다.

사용자 로그인을 처리하는 비동기 함수다. dispatch를 통해 전달한 email과 password는 위 함수가 받을 것이다.

처음에는 구글링을 통해 auth.signInWith~~ 방식으로 코드를 작성했는데, 위 에러가 console에 찍혔다. firebase V9에서 함수 사용 방식이 달라졌기에 발생한 에러였다. 위 코드처럼 auth를 sign 함수 내부에 넣어주는 방식으로 해결했다.

reference: https://velog.io/@seondal/Firebase-v9부터-달라진-인증모듈-사용법#2-auth-관련-함수들-사용

다음 에러는 try 문 내부의 return 부분에서 발생했다. 직렬화에 관한 내용을 다루고 있다. 직렬화 자체에 대해 다루면 코딩을 여기서 멈출 것 같다고 판단했다. 간단히 정리하면, redux의 action에는 비직렬화된 값이 포함되어 있으면 해당 에러가 발생한다. firebase의 사용자 객체는 복잡한 내부 구조를 가지고 있기에 직렬화하기 어렵다고 한다. 따라서 현재로서는 사용자 객체를 통으로 return하는 것이 아니라 필요한 정보만 추출하는 방식을 택했고, 에러는 사라졌다.

결론적으로 fulfilled 되었을 때 초기값 user는 사용자의 email로 업데이트 된다.

다음은 오늘 마주한 마지막 에러다.

페이지 이동에 대한 로직을 useEffect 함수 외부에서 작성한 탓에 발생한 에러였다.

isAuthentication을 통해 useEffect 내부에서 페이지 이동을 처리했다. 즉, 로그인에 성공하면 home으로 이동한다. 그런데 이동이 안 됐다.

의존성 배열에 특정 value를 입력해야 한다. value가 변경될 때마다 호출되며, 이때 value는 렌더링과 관련된 값이어야 한다.

후... 대한민국 만세