[to-do-app] React 할 일 추가 기능

https://yeomss.tistory.com/207?category=976597 

[to-do-app] React 할 일 모두 삭제 기능

이전 글은 위에 링크로 달아놓겠습니다.

해당 시리즈를 확인하고 싶으시다면 아래 태그란에 [react-to-do-app] 을 클릭해주세요.

---

 

 

 InputView 

import React from "react";
import { useSelector } from "react-redux";

import "../styles/input.css";
import InputForm from "../components/input/InputForm";
import Alarm from "../components/common/Alarm";

const InputView = () => {
	const isOpen = useSelector((state) => state.todo.isOpenModal);

	return (
		<>
			<InputForm />
			<Alarm isOpen={isOpen} />
		</>
	);
};

export default InputView;

InputForm 이 있으며 isOpen이 true라면 열리는 모달창이 있습니다.

 

 

 Input 창 만들기 

<div className="inputBox shadow">
    <input
        type="text"
        value={newTodo}
        onChange={onChangeNewTodo}
        onKeyPress={addTodoKey}></input>

    <span className="addContainer" onClick={addTodo}>
        <i className="fas fa-plus addBtn btn"></i>
    </span>
</div>

input 태그를 이용하여 입력 폼을 만들어줍니다.

해당 input의 값은 newTodo 라는 state 안에 들어가게 됩니다.

그리고 옆에는 addContainer 라는 이름의 리스트 입력 버튼을 만듭니다. 클릭을 하면 addTodo 라는 함수가 실행됩니다.

 

const [newTodo, setNewTodo] = useState("");

const onChangeNewTodo = useCallback((e) => {
    setNewTodo(e.target.value);
}, []);

newTodo의 값을 input 폼이 입력이 될 때 마다 변경이 되도록 onChange 함수를 만들어줍니다.

 

const dispatch = useDispatch();

// 리스트 입력 함수
const addTodo = useCallback(() => {
    if (newTodo !== "") {
        const data = {
            isCompleted: false,
            text: newTodo,
        };
        dispatch(todoSlice.actions.addTodo(data));
        setNewTodo("");
    } else {
        dispatch(todoSlice.actions.toggleModal());
    }
}, [dispatch, newTodo]);


// 리스트 입력 함수 (enter키)
const addTodoKey = useCallback(
    (e) => {
        if (e.key === "Enter") {
            addTodo();
        }
    },
    [addTodo]
);

addTodo 함수는 action 을 실행합니다.

data: {
    list: [
        { isCompleted: false, text: "hi1" },
        { isCompleted: false, text: "hi2" },
    ],
},

addTodo(state, action) {
    state.data.list.push(action.payload);
},

state에 todo 리스트를 추가합니다.

 

 

 전체 코드 

import React, { useCallback, useState } from "react";
import { useDispatch } from "react-redux";
import todoSlice from "../../reducers/todo";

const InputForm = () => {
	const dispatch = useDispatch();
	const [newTodo, setNewTodo] = useState("");

	const onChangeNewTodo = useCallback((e) => {
		setNewTodo(e.target.value);
	}, []);
	const addTodo = useCallback(() => {
		if (newTodo !== "") {
			const data = {
				isCompleted: false,
				text: newTodo,
			};
			dispatch(todoSlice.actions.addTodo(data));
			setNewTodo("");
		} else {
			dispatch(todoSlice.actions.toggleModal());
		}
	}, [dispatch, newTodo]);
	const addTodoKey = useCallback(
		(e) => {
			if (e.key === "Enter") {
				addTodo();
			}
		},
		[addTodo]
	);

	return (
		<div className="inputBox shadow">
			<input
				type="text"
				value={newTodo}
				onChange={onChangeNewTodo}
				onKeyPress={addTodoKey}></input>

			<span className="addContainer" onClick={addTodo}>
				<i className="fas fa-plus addBtn btn"></i>
			</span>
		</div>
	);
};

export default InputForm;

const { createSlice } = require("@reduxjs/toolkit");
const { getTodo } = require("../actions/todo");

const initialState = {
	isTodoGetting: false,
	data: {
		list: [
			{ isCompleted: false, text: "hi1" },
			{ isCompleted: false, text: "hi2" },
		],
	},
	isOpenModal: false, // 모달창 오픈
};

const todoSlice = createSlice({
	name: "todo",
	initialState,
	reducers: {
		toggleTodo(state, action) {
			const id = action.payload;
			state.data.list[id].isCompleted = !state.data.list[id].isCompleted;
		},
		removeTodo(state, action) {
			const id = action.payload;
			state.data.list.splice(id, 1);
		},
		clearTodo(state, action) {
			state.data.list = [];
		},
		addTodo(state, action) {
			state.data.list.push(action.payload);
		},
		toggleModal(state, action) {
			state.isOpenModal = !state.isOpenModal;
		},
	},

	extraReducers: {
		[getTodo.pending](state, action) {
			state.isTodoGetting = true;
		},
		[getTodo.fulfilled](state, action) {
			state.isTodoGetting = false;
			state.data = action.payload;
		},
		[getTodo.rejected](state, action) {
			state.isTodoGetting = false;
			state.data = null;
		},
	},
});

module.exports = todoSlice;

input:focus {
	outline: none;
}
.inputBox {
	background: white;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
}
.inputBox input {
	border-style: none;
	font-size: 0.9rem;
}
.addContainer {
	float: right;
	background: linear-gradient(to right, #6478fb, #8763fb);
	display: block;
	width: 3rem;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
}
.addBtn {
	color: white;
	vertical-align: middle;
}
.closeModalBtn {
	background: linear-gradient(to right, #6478fb, #8763fb);
	border: none;
	/* color: #42b983; */
}

 

 

 결과 화면 

 

 

 

 

 

 

 

 

 

#리액트 투두리스트 앱 #react todoapp #react to do app #리액트 input #react add

---

다음 글

https://yeomss.tistory.com/212

[to-do-app] React react-bootstrap으로 모달 창 생성