📆 22.10.11 - Redux, Router를 TodoList에 적용해보기 2

버들·2022년 10월 11일

React TIL redux router

✨Today I Learn (TIL)

목록 보기

6/62

Redux와 Router 사용해서 TodoList 만들기 2차이다. 이번에는 라우터 원리와 redux 데이터를 컴포넌트에 적용한 예를 다루는 TIL이다.
Redux 구조 알아보러가기! (1부)

0. react lifecycle

시작하기 전에 리액트의 라이프사이클을 간단하게 정리하려고한다.
먼저 LifeCycle은 한국어로 '생명주기' 라고 한다. 
react에서의 LifeCycle은 components의 생명주기를 뜻하며, mount(생성) -> updating(수정) -> unmount(제거) 방식으로 이루어진다.

react class components 가 LifeCycle 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.
Hook에 관해서는 하단에서 프로젝트를 구성하면서 쓰이는 것을 설명하도록 하겠다.

Class Components LifeCycle

mount

constructor
컴포넌트 생성자 메서드로, 생성되면 가장 먼저 실행되는 메서드. this.props, this.state에 접근이 가능하고 리액트 요소를 반환
getDerivedStateFromProps
props로부터 파생된 state를 가져옵니다. 즉 props로 받아온 것을 state에 넣어주고 싶을 때 사용
render
컴포넌트를 렌더링하는 메서드
componentDidMount
컴포넌트가 마운트 된다. 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드

updating

getDerivedStateFromProps
컴포넌트의 props나 state가 바뀌었을 때 호출
shouldComponentUpdate
컴포넌트가 리렌더링 할지 말지를 결정하는 메서드
componentDidUpdate
컴포넌트가 업데이트 되고 난 후 발생

unmount

componentWillUnmount
컴포넌트가 화면에서 사라지기 전에 호출

1. Router 설정

💡 react-router-dom : 여러 페이지를 가진 웹을 만들 수 있게 도와주는 라이브러리

1. react-router-dom 설치

npm install react-router-dom

2. router 적용 순서

page Components
: ex ) 이 todo 예제는 이런 구조로 컴포넌트로 나눴다.

components 폴더 안의 컴포넌트들은 todo페이지 하나에 모두 그릴 것이라 pages라는 폴더에 Home.jsx에 이런 형식으로 활용을 하였다.

pages라는 폴더는 말그대로 페이지들을 보관하는 폴더로 설정을 하였다. 위의 Detail.jsx와 Home.jsx가 있으니 이 프로젝트에서 만드는 페이지 수는 총 2개인 것이다.

Home.jsx

function Home() {
  const todo = useSelector((state) => state.todoStore.list);
  const param = useParams();
  console.log(todo);
  console.log(param);
  return (
    <>
      <Header />
      <StHome>     {/* StHome은 스타일 컴포넌트로 나눈거에요 */}
        <TodoForm />
        <TodoBox />
      </StHome>
    </>
  );
}

자, 이제 페이지에 어떤 그림을 그릴 것인지 대강 나왔으니 Router를 활성화 시켜보려고 한다.

Router.jsx

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import Detail from "../pages/Detail";
import Home from "../pages/Home";
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* home /  element 요소로 컴포넌트 넣기*/}
        <Route path="/" element={<Home />}></Route>
        {/* id값에 따라서 dynamic route 설정 아래는 /:id 로 id 값에 따라 
        여러 페이지 생성 */}
        <Route path="detail/:id" element={<Detail />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위의 파일은 라우팅을 해주는 역할을 해주는 Router의 핵심 파일이다. 위의 import한 Detail과 
Home을 보면 아까 만든 pages의 폴더의 파일들을 사용하는 것이 보인다. 
Detail 페이지와 Home을 Router.jsx를 통해서 연결한다.
그리고 detail 컴포넌트는 추후에 id값에 따라 페이지에 렌더링 되는 값을 달리 할 것이기 때문에, 
dynamic route를 사용한다.

TodoForm.jsx

import "../App.css";
import styled from "styled-components";
import { useRef, useEffect } from "react";
// useDispatch 로 redux reducer 사용
import { useDispatch } from "react-redux";
import { sendTodo } from "../redux/modules/todoStore"; // action이 다수면, 해당 함수의 action 객체를 import

function TodoForm() {
  const dispatch = useDispatch();
  const refTitle = useRef();
  const refContent = useRef(); // ref or event.target usually recomended?
  // todoId에 ref으로 지정한 부분에 3을 대입
  const todoId = useRef(3);

  // useEffect hook으로 먼저 렌더링될때 dom을 지정하면 된다고 하기는 함..

  const sendItem = (event) => {
    // ref 으로 지정한 요소의 현재 값을 저장
    const title = refTitle.current.value;
    const content = refContent.current.value;
    //console.log(original); // useState 확인 용

    // 새로고침이 되어도 데이터가 날라가지 않게 이벤트 막기 (form 속성)
    event.preventDefault();
    if (title.trim() === "" || content.trim() === "") return null;

    //  reducer에서 sendTodo를 불러와 payload 값에 해당 값들 대입
    dispatch(
      sendTodo({
        id: todoId.current,
        title: title,
        content: content,
        isDone: false,
      })
    );
    refTitle.current.value = "";
    refContent.current.value = "";
    todoId.current += 1;
  };

  useEffect(() => {
    refContent.current.addEventListener("keypress", function (event) {
      if (event.key === "Enter") {
        sendItem();
      }
    });
  });

  return (
    <StTdForm onSubmit={sendItem}>
      <StIContainer>
        <h2>title</h2>
        <StInput
          type="text"
          name="title"
          ref={refTitle}
          placeholder="Type here"
        />
      </StIContainer>
      <StIContainer>
        <h2>content</h2>
        <StInput
          type="text"
          name="content"
          ref={refContent}
          placeholder="Type here"
          //onKeyUp={keyControl}
          //onKeyPress={enterItem}
          // -> this feature is no longer recommended
        />
      </StIContainer>
      <StButton type="submit" className="btn glass ml-[10px]">
        Add Item
      </StButton>
    </StTdForm>
  );
}

export default TodoForm;

`;

TodoBox.jsx

import "../App.css";
import styled from "styled-components";
import Todo from "./Todo";
import { useSelector } from "react-redux";

function TodoBox() {
  /* 구조 객체 분해를 하여 실제 todo > list 의 주소에 접근 map 으로 isDone 값이 false
  인 것만 추출하여 새 배열 형성
  */
  const { list } = useSelector((state) => state.todoStore);

  return (
    <form>
      <StH1>Working.. 🔥</StH1>
      <StTodoBox>
        // 구조 객체 분해를 하여 얻은 list 배열 주소에
        {list.map((todo) => {
          if (todo.isDone == 0) {
            return (
              // !!! 중앙상태관리를 쓴다고 props를 안쓴다는 생각을 버리자
              // Todo 자식 컴포넌트에 key, title, content, todo를 prop로 보낸다
              <Todo
                key={todo.id}
                title={todo.title}
                content={todo.content}
                todo={todo}
              />
            );
          } else {
            return null;
          }
        })}
      </StTodoBox>
      <StHr />
      <StH1>Done..! 🎉</StH1>
      <StTodoBox>
        //위와 마찬가지로 isDone이 True 인 값만 빼서 새 배열로 생성한다
        {list.map((todo) => {
          if (todo.isDone == 1) {
            return (
              <Todo
                key={todo.id}
                title={todo.title}
                content={todo.content}
                todo={todo}
              />
            );
          } else {
            return null;
          }
        })}
      </StTodoBox>
    </form>
  );
}

export default TodoBox;

Todo.jsx

import "../App.css";
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";
import { deleteTodo, updateTodo } from "../redux/modules/todoStore";
import { useParams, Link } from "react-router-dom";

// 부모 컴포넌트 TodoBox에서 props로 받아옴
function Todo({ todo, title, content }) {
  const param = useParams();
  console.log(param);
  const dispatch = useDispatch();

  const deleteItem = (id) => {
    dispatch(deleteTodo(id));
  };

  const doneItem = (id) => {
    dispatch(updateTodo(id));
  };

  return (
    <StTodo>
      <StLink to={`/detail/${todo.id}`} key={todo.id}>
        {/* useNavigation = <a> 브라우저 새로고침되어 데이터 전달을 못함 -> 초기화 되서
      이걸 <Link> 가 지켜준데 */}
        <p>상세보기</p>
      </StLink>
      <StTitle> {title} </StTitle>
      <p>{content}</p>
      {/* 즉시 실행 함수를 썬 이유는 Clouser 개념*/}
      <StButton type="button" onClick={() => deleteItem(todo.id)}>
        Delete
      </StButton>
      <StButton2 type="button" onClick={() => doneItem(todo.id)}>
        {/* 나는 컴포넌트로 나눴기에 props로 부모 컴포넌트의 map의 current value인 'todo'를 받아와야 한다. */}
        {todo.isDone ? "Cancle" : "Done!"}
      </StButton2>
    </StTodo>
  );
}

export default Todo;

Detail.jsx

import "../App.css";
import styled from "styled-components";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { redirectTodo } from "../redux/modules/todoStore";

function Detail() {
  const dispatch = useDispatch();
  const todo = useSelector((state) => state.todoStore.void);
  console.log(todo);
  /* useParams 로 라우터 페이지의 파라미터를 받아오는 거임. 뭐시기냐, props 기능이 절대 아님
  주소에 들어가는 데이터는 모두 STRING*/
  const { id } = useParams();
  /* 렌더링 시 바로 dispatch , 의존성 배열 사용 */
  useEffect(() => {
    /* 문자열로 만들어지기 때문에 정수화를 해야됨 */
    dispatch(redirectTodo(+id));
  }, [dispatch, id]);
  const navigate = useNavigate();
  // console.log(param);
  return (
    <StDetail>
      <BtnBack type="button" onClick={() => navigate("/")}>
        이전으로
      </BtnBack>
      <StId>ID : {id}</StId>
      <StTitle> {todo.title} </StTitle>
      <StContent> {todo.content} </StContent>
    </StDetail>
  );
}

export default Detail;