🖥 필요한 state

• todoList : [
  • id: map 사용시 아이디 부여하기 위해 필요
  • selected : 완료 여부 체크
  • icon : selected 값에 따른 아이콘 변경
  • todoText : 할일 텍스트
    ]
• remainTodo : 남은 할일의 개수
• nowDate : 오늘 날짜 (YYYY / MM / DD)

state 값을 관리하기 위해 React-Redux의 구조를 사용하기로 한다.

🖥 폴더 구조

• src
  • actions
    • todoList.js
    • types.js
  • components
    • AddTodoList.js
    • AddTodoListRoot.js
    • DisplayTodoList.js
    • DisplayTodoListRoot.js
  • containers
    • AddTodoList.js
    • DisplayToDoList.js
  • reducers
    • rootReducers.js
    • todoList.js
  • css
    • AddTodoListRoot.css
    • DisplayTodoListRoot.css
  • App.js

components에서 Root를 추가한 이유 🧐

action 으로 할일을 추가하고 나서 변경된 state를 display쪽으로 전달시켜야 하는데, 데이터의 관리와 효율성을 높이기 위해서 root구조로 설계하였다.

container와 components로 나눈 이유 🧐

실제 redux와 소통하면서 state를 변경하는 공간과 사용자에게 보여지는 공간이 분리되어야 에러가 났을 때, 이를 쉽게 잡을 수 있다고 판단하였다. 따라서 container는 redux와 소통시키고, components는 단순 ui작업만 수행하게 된다.

🖥 Redux 사용하기

• state : store에 저장된 값
• action : store값 변경시키기
• reducer : (action, old state) 받아서 new state로 변환
• store : store에 state 저장

📍 action

actions/types.js

export const ADD_TODO_LIST = "ADD_TODO_LIST";
export const SUCCESS_TODO_LIST = 'SUCCESS_TODO_LIST';
export const DELETE_TODO_LIST = "DELETE_TODO_LIST";
export const UPDATE_TODO_LIST = 'UPDATE_TODO_LIST';

action/todoList.js

• addTodoList(todoText) : 사용자는 자신이 할 일을 Input 창에 입력
  ADD 버튼을 누르면 입력한 일이 아래에 저장된다
  Main: 자신이 기록한 할 일들이 아래에 리스트
  할 일들은 자신이 했는지 안 했는지 체크할 수 있다
  자신에게 얼마만큼의 할 일이 남았는지 확인
• successTodoList(todoId) : 완료된 일을 선택하면 하얀하트가 분홍하트로 변경되면서 남은 할일의 개수가 1 줄어든다.
• updateTodoList(todoText) : 글자를 클릭하면 할 일을 수정
  (엔터로 확인)
• deleteTodoList(todoId) : x를 클릭하면 할 일을 삭제

📍 reducer

reducers/todoList.js

const initialState = {
    todoList: [{ id: 0, selected: false, icon: getIoHeartOutline(), todoText: '모던자바읽기' }],
    remainTodo: 1,
    nowDate: getDate()
};

icon은
import { IoHeartOutline, IoHeartSharp } from "react-icons/io5"; 을 활용하였고,
초기 스테이트 값을 정할때, todoList.icon / nowDate를 불러오기 위해

function getDate() {
    var today = new Date();
    let date = today.getFullYear() + ' / ' + (today.getMonth() + 1) + ' / ' + today.getDate();
    return date;
}
function getIoHeartOutline() {
    return <IoHeartOutline size="30" />
}
function getIoHeartSharp() {
    return <IoHeartSharp size="30" color='#FD8A69' />
}

함수를 정의하였다.
이로써, 스테이트는 전적으로 reducer에서 관리되도록 구현하였다.

📍 containers

여기서는 components가 redux에 저장된 state 값을 사용할 수 있도록 연결시켜주어야 한다.

connect 를 통해 연결!!!!!!

props를 받아서 쓰게!! 만들어주어야 함

function mapReduxStateToReactProps(state)
👉 리덕스의 스테이트를 리액트의 프롭스로 주는 함수
function mapReduxDispatchToReactProps(dispatch)
👉 리덕스의 액션디스패치를 리액트의 프롭스로 주는 함수

containers/AddTodoList.js

import AddTodoList from '../components/AddTodoList';
import { connect } from 'react-redux';
import { addTodoList } from '../actions/todoList';
function mapReduxStateToReactProps(state) {
    return state.todoList;
}
function mapReduxDispatchToReactProps(dispatch) {
    return {
        onClick: function (todoText) {
            dispatch(addTodoList(todoText));
        }

    }
}
export default connect(mapReduxStateToReactProps, mapReduxDispatchToReactProps)(AddTodoList);

containers/DisplayTodoList.js

import DisplayTodoList from '../components/DisplayTodoList';
import { connect } from 'react-redux';
import { deleteTodoList, successTodoList } from '../actions/todoList';

function mapReduxStateToReactProps(state) {
    return state.todoList
}
function mapReduxDispatchToReactProps(dispatch) {
    return {
        onClick: function (todoId) {
            dispatch(successTodoList(todoId));
        },
        onDelete: function (todoId) {
            dispatch(deleteTodoList(todoId));
        }

    }

}
export default connect(mapReduxStateToReactProps, mapReduxDispatchToReactProps)(DisplayTodoList);