5주차 과제1️⃣

Requirement

• Movie App에 Redux를 사용하여 데이터 흐름 관리하기

Coding

terminal에서 Redux설치

$ npm install react-redux 
$ npm install @reduxjs/toolkit
$ npm install --save redux-logger

index.js

Provider는 react-redux 라이브러리에 내장되어있는, 리액트 앱에 store 를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트이다. 일반적으로 <Provider store={store}>이와 같은 형식으로 사용한다.

Provider 컴포넌트는 Redux Store에 액세스해야 하는 중첩된 컴포넌트에서 Redux Store를 사용할 수 있도록 한다. React Redux 앱의 모든 React 컴포넌트는 Store에 연결될 수 있이며, 대부분의 응용 프로그램에서 <Provider>를 앱 내부의 최상위 수준에서 렌더링한다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./style/index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import store from "./redux/store";
import { Provider } from "react-redux";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

movie-store.js

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

const initialState = {
  movies: [],
};
//  Redux 상태 관리를 간편하게 해주는 도구
// createSlice 함수를 사용하면 Redux 액션과 리듀서를 하나의 객체 안에 정의할 수 있음
const MovieSlice = createSlice({
  name: "movie",
  initialState: initialState,
  reducers: {
    updateMoviestore: (state, action) => {
      console.log(action);
      return (state = {
        ...state,
        ...action.payload,
      });
    },
  },
});

export const { updateMoviestore } = MovieSlice.actions;
export default MovieSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { logger } from "redux-logger";
import MovieStore from "./movie-store";

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

export default store;

Result

GitHub

13회차 과제

🫠 느낀점

실습을 통해 redux에 아주 조금 redux 구조에 대해 이해하였다. 그렇지만 아직 하나 하나의 코드들이 redux를 사용하기위해 어떤 역할을 수행하고 있는지 이해가 잘 되지 않는다. 좀 더 redux에 대해 공부가 필요하다.🥲

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