[TIL] 유데미X사람인 취업 부트캠프 36일차 / redux

[1. 오늘 배운 것]

1. contexts

(1) Header

- export좀 잊지 말자 제발 흑흑

import React from "react";

function Header() {
  return (
    <header className="h-14 border">
    </header>
  );
}

export default Header;

(2) Footer

import React from "react";

function Footer() {
  return (
    <footer>
    </footer>
  );
}

export default Footer;

(3) Layout

import React from "react";
import Header fron "./Header";
import Footer from "./Footer";

function Layout({ children }) {
  console.log("리렌더 Layout");
  return (
    <div>
    <Header />
      <main className="border">{children}</main>
      <Footer />
    </div>
  );
}

export default Layout;

(4) Page

import React from "react";
import Layout from "./Layout";

function Page({ children }) {
  console.log("리렌더 Page");
  return <Layout>{children}</Layout>;
}

export default Page;

(5) Homepage

import React from "react";
import Page from "../components/Page";

function HomePage() {
  return (
    <Page>
    </Page>
  );
}

export default HomePage;

<Homepage><Page><Layout><Header/><Footer/></Layout></Page></Homepage>

이런식으로 감싸져서 Homepage를 App.js로 출력

(6) App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import HomePage from "./pages/HomePage";

function App() {
  console.log("리렌더 App");
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/" element={<HomePage />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

export default App;

 

2. reducer

(1) 액션타입 : 액션이 수행하는 작업의 종류

(2) payload : 데이터 전달

(3) 액션 :  상태에 어떤 변화가 필요한지 설명하는 객체, 액션타입을 필수로 포함하고 페이로드나 기타 필드를 포함할 수 있음

export const ADD_ITEM = "cart/addItem";
export const REMOVE_ITEM = "cart/removeItem";

export const addItemActionCreator = (payload) => ({ type: ADD_ITEM, payload });
export const removeItemActionCreator = (payload) => ({
  type: REMOVE_ITEM,
  payload,
});

(4) store : 리덕스애플리케이션의 상태를 저장하는 곳, 현재 상태와 리듀서를 포함

- 현재 상태

const initialState = {
  items: [],
  totalPrice: 0,
};

(5) Dispatch : 스토어에 액션을 전달하는 과정, 액션을 디스패치하면 스토어는 등록된 리듀서를 호출하여 현재 상태와 디스패치된 액션을 기반으로 새로운 상태를 계산

(6) reducer : 리듀서 내에서 액션 타입에 따라 상태를 어떻게 변ㄴ경할지 지정

export default function cartReducer(state = initialState, action) {
  const newState = { ...state };

  if (action.type === ADD_ITEM) {
    const newItem = action.payload;
    const newItems = [...state.items, newItem];

    newState.items = newItems;
  } else if (action.type === REMOVE_ITEM) {
    const itemIdToRemove = action.payload;
    const newItems = state.items.filter((item) => item.id !== itemIdToRemove);

    newState.items = newItems;
  }

  return newState;
}

 

[2. 회고]

context쓸 때 자꾸 export default를 까먹어서 미춰버리겄다 ㅜㅜ

그리고 redux는 몇 번을 봐도 힘들다,,,,^^ 생소한 단어 여러개를 사용하는데, 그 안에 로직이 있어서 더 힘든 것 같다. 차근ㄱ차근 다시 읽어보자!!