회원가입 페이지

회원가입은 이름, 이메일 ,비밀번호로 구성됨.

회원가입이 완료될 경우 바로 로그인으로 처리.

비밀번호는 6글자 이상.

폴더 / 파일 생성

src/store/index.js : redux 통합

src/store/userReducer.js : 회원가입 상태관리

src/store/index.js

import { combineReducers } from 'redux'
import userReducer from './userReducer'

// Reducer들을 조합.
const rootReducer = combineReducers({
  user: userReducer,
})

export default rootReducer

index.js에 redux Provider 제공

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { legacy_createStore } from 'redux'
import rootReducer from './store'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={legacy_createStore(rootReducer)}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals()

src/store/userReducer.js

// 액션 타입
const SET_USER = 'SET_USER'
const CLEAR_USER = 'CLEAR_USER'

// 액션 생성 함수함수
export const setUser = user => ({ type: SET_USER, currentUser: user })
export const clearUser = () => ({ type: CLEAR_USER })

// 초기 상태
const initialState = {
  currentUser: null,
  isLoading: true,
}

// 리듀스
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_USER:
      return {
        currentUser: action.currentUser,
        isLoading: false,
      }
    case CLEAR_USER:
      return {
        currentUser: null,
        isLoading: false,
      }
    default:
      return state
  }
}

export default userReducer

# App.js

```jsx
import { Navigate, Route, Routes } from 'react-router-dom'
import './App.css'
import Join from './pages/Join'
import Login from './pages/Login'
import { useEffect } from 'react'
import { getAuth, onAuthStateChanged } from 'firebase/auth'
import { useDispatch, useSelector } from 'react-redux'
import { clearUser, setUser } from './store/userReducer'
import Main from './pages/Main'

function App() {
  const dispatch = useDispatch()

  // useSelector를 사용하여 현재 로그인된 사용자 정보 가져오기
  const { isLoading, currentUser } = useSelector(state => state.user)
  console.log(currentUser)

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(getAuth(), user => {
      if (!!user) {
        dispatch(setUser(user))
      } else {
        dispatch(clearUser())
      }
    })
    return () => unsubscribe()
  }, [dispatch])
  return (
    <>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/join"
          element={currentUser ? <Navigate to="/" /> : <Join />} //로그인 유저가 있을 경우 메인으로
        />
      </Routes>
    </>
  )
}

export default App