과제

기존에 만들었던 무비 앱에 Redux-toolkit을 작성하시오.

Redux-toolkit

리덕스 툴킷에 대해서 간단하게 기록하자면 중앙 저장소에 현재 상태를 저장하는 라이브러리다.
제일 핵심은 중앙 저장소에 상태를 저장하고 컴포넌트에서 그 상태를 불러와 화면에 띄워주고 뭔가 상태를 변해야 할 때 dispatch를 통해서 중앙 저장소의 상태를 변하게 만들어주는게 핵심이다.

조금 더 설명하자면 중앙 저장소가 있고
화면에 그 상태들을 뿌려주기 위해 저장소를 참고하는 여러가지 컴포넌트들이 있다.
사람들이 그 컴포넌트와 상호작용을 하면 그 중앙 저장소의 상태를 바꾸기 위해 dispatch를 한다.
중앙 저장소에서는 dispatch된 상태를 확인하고 새로운 상태로 바꾸게 된다.
중앙 저장소에서 상태가 바뀌었기 때문에 참조하고 있는 컴포넌트들이 새로운 상태를 확인하고 리렌더링을 하게 된다.

기존 React에서 제공하는 Context-api가 있다.
하지만 특정 상황에서는 Context-api보단 Redux를 사용하는 것이 좋기 때문에 배워두면 좋다.

물론 최근에는 Redux 뿐만 아니라 jotai, zustand, recoil 등 비교적 쉬운 상태 관리 라이브러리가 나온 만큼 잘 알아보고 사용하는 것이 좋다.

그렇다면 과제에는 어떻게 적용 할까?

먼저 중앙 저장소 역할을 할 Store.js를 만든다.

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import movieReducer from "./MovieStore";
import logger from "redux-logger";

export const store = configureStore({
  reducer: {
    movie: movieReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

과제와 같이 하나만 사용한다면 굳이 slice 해서 작성할 필요는 없지만 여러가지 알아두면 좋기 때문에 일부로 쪼갰다.

다음으로는 영화 데이터만 관리하는 store를 작성한다.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  movie: {},
  flag: false,
};

export const movieSlice = createSlice({
  name: "movie",
  initialState,
  reducers: {
    setMovie: (state, actions) => {
      state.movie = actions.payload;
      state.flag = true;
    },
    setFlag: (state) => {
      state.flag = false;
    },
  },
});

export const { setMovie, setFlag } = movieSlice.actions;

export default movieSlice.reducer;

initialState는 기본적으로 리덕스가 생성 되면서 만들 데이터를 의미한다.
직접 객체 안에 데이터를 넣어도 되지만 알아보기 편하게 작성 했다.
reducers에는 액션을 넣는다.
기존 redux에서는 reducer처럼 action.type === "INCREMENT" 와 같은 방식으로 switch 문을 통해 혹은 if문을 통해 액션을 받아 처리했지만 redux-toolkit에서는 그런 방식에서 좀 더 쉽게 함수를 작성하도록 바뀌었다.
이 부분이 좀 더 직관적인 모양이다.

다음으로는 action들을 외부로 내보낸다.
이 action들을 외부로 내보내서 원하는 곳에서 dispatch 할 때 사용할 수 있다.

function App() {
  const { value, handleChange } = useSearch("");
  const { favorite, addFavorite, removeFavorite } = useFavorite(value);

  return (
    <Provider store={store}>
     ...
    </Provider>
  );
}

먼저 App 컴포넌트에서 자식들에게 데이터를 넘길 수 있도록 Provider를 작성한다.
이렇게 감싸두면 자식 컴포넌트에서 원할 때 useSelector를 사용하여 store에 있는 데이터들을 참조 하고 가져다 사용할 수 있다.

 const disPatch = useDispatch();
  const flag = useSelector((store) => store.movie.flag);
  useEffect(() => {
    disPatch(setFlag());
  }, []);

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

그리고 사용하거나 상태를 변경할 수 있는 곳에서는 위와 같이 작성한다.
먼저 useSelector를 통해 store를 선택하고 그 안에 있는 데이터를 선택해서 가져온다.
그리고 상호작용을 통해 store의 상태를 변경 하려는 경우 useDispatch를 가져와서 변경 하도록 한다.

이렇게 리덕스 툴킷을 사용하여 멋지게 상태를 변경하고 참조할 수 있게 되었다.

주의 해야할 점은 원래대로라면 store에서 상태에 값을 직접 변경하는 것은 절대로 절대로 하면 안되는 행동이다.
이유는 불변성의 원칙이 있기 때문이다.
그러나 redux-toolkit의 경우엔 스스로 알아서 상태를 복제 하고 새로운 상태로 변경하기 때문에 알아서 불변성의 원칙을 지켜준다.
그렇기 때문에 직접 state에 접근해서 값을 수정해도 상관이 없다.
그 점만 주의해서 사용하기만 하면 된다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프