5월 16일 프리온보딩 14일차

오늘 한 일

다음 기업 과제를 수행하기 전에 어제 강의한 것을 다시 돌려보면서 복습을 해보았다.
다시 천천히 보니 더 많은 것이 보였고, 따라 코드도 작성해보니 더 이해가 잘되었다.

공부한 것

redux

1. 설치
   먼저 redux를 더 편하게 사용하기 위해 redux toolkit을 같이 설치해 준다.
   yarn add @reduxjs/toolkit react-redux

2. store 구현
   어디서는 사용할 수 있게 Provider를 Routes 위에 감싸줘야 하는데 사용할 상태들을 가지고 있는 store를 제작해야 한다.
   코드는 저번 기업 과제인 영화 검색 코드를 활용했다.

import { configureStore } from '@reduxjs/toolkit'

import movie from './movie'

export const store = configureStore({
  reducer: {
    movie,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

이제 이 store를 Provider의 props로 넣어줘야 한다.

<React.StrictMode>
  <Provider store={store}>
    <RecoilRoot>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </RecoilRoot>
  </Provider>
</React.StrictMode>

3. reducer 구현
   영화의 상태를 가져오거나 관리하기 위한 reducer를 만들어 준다.

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import type { RootState } from '.'

import { ISearchItem } from 'types/movie.d'

export interface MovieListState {
  movieList: ISearchItem[]
}

const INITIAL_STATE: MovieListState = {
  movieList: [],
}

export const movieSlice = createSlice({
  name: 'movieList',
  initialState: INITIAL_STATE,
  reducers: {
    setMovieList: (state: MovieListState, action: PayloadAction<ISearchItem[]>) => {
      state.movieList = action.payload
    },
  },
})

export const { setMovieList } = movieSlice.actions

export default movieSlice.reducer

// Selector
export const getMovieList = (state: RootState): ISearchItem[] => state.movie.movieList

먼저, 초기화를 정의해준다.
다음 reducers 안에선 여러가지 관리할 수 있는 함수를 정의해준다.
state는 바뀔 상태고, action은 현태 값이라고 볼 수 있다.
slice를 정의한 뒤에는 다른 폴더에서 상태를 가져오거나 관리할 수 있도록 export를 해준다.

4. 다른 폴더에서 사용
   다른 폴더에서 가져오려면 원래 useSelector와 useDispatch가 필요한데 typescript에서는 한번 필터링을 거쳐줘야 한다.
   그래서 다른 파일에서 각자 필터를 해서 사용할 수 있게 변형한다.

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppDispatch = (): AppDispatch => useDispatch<AppDispatch>()

이렇게 변형한 것을 이용해서 상태를 관리할 수 있다.

import { getMovieList, setMovieList } from 'states/movie'

const movieList = useAppSelector(getMovieList)
const dispatch = useAppDispatch()

selector로 가져온 변수를 그냥 사용하면 되고, dispatch는 reducer에서 정의한 함수와 함께 사용한다.
dispatch(setMovieList[]) // 영화 목록 초기화

느낀 점

이미 만들어진 것을 보며 사용해서 그렇지, 실제로 처음부터 혼자 했다면...상상만 해도 머리가 아프다