코인잼 리팩토링 하기 -3부-

 

첫 번째

 

useEffect dependency를 추가하였다.

▼ 기존

  useEffect(() => {
    onAuthStateChanged(auth, (userAuth) => {
      if (userAuth) {
        // 유저가 존재하면 login dispatch
        dispatch(
          login({
            email: userAuth.email,
            uid: userAuth.uid,
          })
        )
      } else {
        dispatch(logout())
      }
    })
  }, [])

▼ 변경후

  useEffect(() => {
    onAuthStateChanged(auth, (userAuth) => {
      if (userAuth) {
        // 유저가 존재하면 login dispatch
        dispatch(
          login({
            email: userAuth.email,
            uid: userAuth.uid,
          })
        )
      } else {
        dispatch(logout())
      }
    })
  }, [dispatch])

 

dispatch 함수가 변경될때마다 useEffect를 실행하기위해서 변경하였다.

 

두번째

authStore에서 useSelector 훅을 사용하였다.

이유: 불필요한 렌더링을 줄이기 위해서

import { createSlice } from '@reduxjs/toolkit'
import { useSelector } from 'react-redux'

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {
      state.user = action.payload
    },
    logout: (state) => {
      state.user = null
    },
  },
})
export const selectUser = (state) => state.auth.user
export const useSelectUser = () => useSelector(selectUser)
export const { login, logout } = authSlice.actions
export default authSlice.reducer

useSelector을 사용하여 Redux 스토어의 상태를 읽을 때, 항상 새로운 객체를 생성하고 상태를 비교하여 새로운 렌더링이 필요한지 여부를 결정한다. 그래서 불필요한 렌더링이 발생하거나 성능에 영향을 줄 수 있다!!

 

내가 만든 useSelectUser 함수는 useSelector을 호출하는 대신 새로운 useSelector 훅을 만들고 selectUser 함수를 전달한다.

이를 통해 selectUser 함수가 변경되지 않으면, useSelector가 반환하는 값이 동일하다는 것을 보장할 수 있고,  불필요한 렌더링을 방지할 수 있다.

 

세번째

CoinDetail 페이지 컴포넌트화