🔥 Firebase와 Redux Store 함께 이해하기

React에서 상태 관리를 할 때 Redux를 쓰는 경우가 많고,
백엔드 없이 빠르게 서버 기능을 붙일 땐 Firebase가 유용하다.
그런데 이 둘을 함께 쓸 때 구조를 어떻게 잡아야 할지 고민이 생기기 마련이다.

오늘은 Firebase와 Redux Store가 각각 어떤 역할을 하고,
어떻게 함께 사용할 수 있는지 정리해본다.

---

Firebase란?

Firebase는 Google에서 제공하는 BaaS(Backend as a Service)로,
백엔드 환경 없이도 쉽게 서버 기능을 구현할 수 있다.

주요 기능은 다음과 같다:

• Authentication (로그인/회원가입)
• Firestore (실시간 NoSQL 데이터베이스)
• Storage (파일 저장)
• Hosting
• Cloud Functions (서버리스 함수)

Firebase를 쓰면 프론트엔드에서 바로 로그인, 데이터 저장, 파일 업로드 등을 처리할 수 있다.

---

Redux Store란?

Redux는 React의 상태 관리를 더 체계적으로 할 수 있게 도와주는 라이브러리다.

Redux Store는 애플리케이션 전체의 상태를 중앙 집중화해 관리하는 공간이다.

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

Redux Store는 크게 다음과 같은 구성요소로 나뉜다:

• Action: 무엇을 할지 설명하는 객체
• Reducer: 액션에 따라 상태를 어떻게 바꿀지 정의
• Store: 상태와 액션, 리듀서를 연결한 중앙 저장소

---

Firebase + Redux 함께 쓰기

두 개를 같이 쓰면 이렇게 나눌 수 있다:

역할	사용 도구
사용자 인증	Firebase Auth
데이터 저장/읽기	Firebase Firestore
로컬 상태 관리	Redux Store
전역 상태 관리	Redux Store

즉, Firebase는 백엔드 역할, Redux는 프론트엔드 상태 관리 역할을 담당한다.

---

예시: 로그인 상태 Redux에 저장하기

1. Firebase로 로그인 처리

import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase'; // 초기화된 Firebase auth 인스턴스

export const loginWithFirebase = async (email, password) => {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  return userCredential.user;
};

2. Redux에 로그인 정보 저장

// actions/userActions.ts
export const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

// reducers/userReducer.ts
const initialState = {
  currentUser: null,
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, currentUser: action.payload };
    default:
      return state;
  }
}

3. 로그인 후 Redux에 저장

const handleLogin = async () => {
  const user = await loginWithFirebase(email, password);
  dispatch(setUser(user));
};

이런 식으로 Firebase에서 받은 사용자 정보를 Redux에 저장해 전역에서 사용할 수 있게 만들 수 있다.

---

주의할 점

• Redux에는 민감한 정보를 저장하지 않는다. (예: 비밀번호, 토큰 등)
• Firebase 자체적으로 onAuthStateChanged와 같은 리스너도 있으므로,
  Redux와 혼동하지 않도록 역할을 잘 구분해야 한다.
• 상태 동기화가 필요한 경우, Firestore의 onSnapshot과 Redux의 dispatch를 함께 활용하면 좋다.

---

🔨 TIL

• Firebase는 인증, DB, 저장소 등 백엔드 기능을 대신해주는 플랫폼이다.
• Redux Store는 프론트엔드의 상태를 전역에서 일관되게 관리하게 도와준다.
• Firebase에서 받은 데이터를 Redux Store에 저장하면 전역 상태와 서버 상태를 잘 연결할 수 있다.
• 단, Redux는 클라이언트 상태 관리만 하므로 보안 정보를 저장하지 않도록 주의해야 한다.