[WIL 2023.06.25] 내배캠 6주차

📝 Situation(상황): 이번주 목표 

• Styled Components를 배워보고, 활용할 수 있다.
• 콜백, promise, async/await 차이를 설명할 수 있다. 이들을 활용해 코드를 구현할 수 있다.
• 리덕스를 사용한 전역 상태 관리를 자유롭게 활용할 수 있으며 전역 상태의 필요성을 설명할 수 있다.
• React-router-dom의 핵심 개념과 관련 hooks에 대해 이해할 수 있다.
• Dynamic route 기법과 useParam hook을 이용하여 동적 라우팅을 구현할 수 있다.

 

👀 Task(임무): situation 중 문제들

이전에 만들었던 Todo List에

1. 설정했던 state를 develop해서 Redux를 이용한 전역 데이터로 관리해보기

2. React Router Dom을 활용하여 상세페이지를 추가로 구현하기

 

🔍 Action(접근방법): 해결시도

리듀스 모듈 파일 안에 todos 추가, 삭제, 업데이트 모두 가능 하게 수정

// redux/modules/todos.js

// Action value
const ADD_TODO = 'todos/ADD_TODO';
const DELETE_TODO = 'todos/DELETE_TODO';
const UPDATE_TODO = 'todos/UPDATE_TODO';

// Action Creator
export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

export const deleteTodo = (payload) => {
  return {
    type: DELETE_TODO,
    payload,
  };
};

export const updateTodo = (payload) => {
  return {
    type: UPDATE_TODO,
    payload,
  };
};

const initialState = {
  todos: [],
};

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        todos: [...state.todos, action.payload],
      };
    case DELETE_TODO:
      return {
        todos: [...state.todos.filter((e) => e.id !== action.payload)],
      };
    case UPDATE_TODO:
      return {
        todos: [
          ...state.todos.filter((e) => {
            if (e.id === action.payload) {
              e.isDone = !e.isDone;
            }
            return e;
          }),
        ],
      };
    default:
      return state;
  }
};

export default todos;

여기에 redux persist를 설치하여 localStorage랑 연결한건 덤

그리고 디테일 페이지가 추가 되었다.

아래는 라우터 파일

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from 'pages/Home';
import Detail from 'pages/Detail';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

TodoCard 컴포넌트 안의 삭제버튼 옆에 상세페이지로 이동하는 링크 설정

<StBtns>
  <Link to={`/detail/${item.id}`}>
    <StImg src={Detail} alt="상세보기" />
  </Link>
  <StDeleteBtn onClick={() => onClickDeleteBtn(item.id)}>
    <StImg src={Delete} alt="삭제버튼" />
  </StDeleteBtn>
</StBtns>

Detail 컴포넌트. params로 id를 가져와서 path 조회

import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';

function Detail() {
  const params = useParams();
  const todos = useSelector((state) => state.todos.todos);
  const navigate = useNavigate();

  const foundTodo = todos.find((item) => {
    return item.id == params.id;
  });

  return (
    <StDiv>
      <StId>ID : {foundTodo.id}</StId>
      <StTitle>{foundTodo.title}</StTitle>
      <StP>{foundTodo.contents}</StP>
      <StBtn
        onClick={() => {
          navigate('/');
        }}
      >
        이전으로
      </StBtn>
    </StDiv>
  );
}

export default Detail;

 

📃 Result(결과): action 후 성과

styled component, Redux, React-Router-Dom 적용 완료된 모습.

이왕 수정하는 김에 좀 이쁘게 꾸몄더니 지난주 보단 훨씬 UI가 보기 좋게 바뀌었다.

 

📓 Point(정리): 이번주 요약

새로운 개념인 Redux와 친해지는데에 많이 애를 먹은 한 주가 아니었나 싶다.

덕분에 레벨2 과제에 거의 올인을 해서

금요일 끝날 때까지 레벨3는 손도 못대는 바람에  

주말에 레벨3를 뒷북치듯 겨우 마무리 할 수 있었는데

이 내용은 따로 정리 할 예정...언제하지...