React로 TodoApp 만들기 (2)Create 기능 개발

CSS 작업 후, CRUD의 첫번 째 기능인 Create 기능 구현에 들어갔다.
⊕ 버튼을 눌러 사용자가 입력한 항목을 추가하는 기능!

이렇게 팝업창/모달창 형태로 띄울꼬야

---

• TodoInsert.js
  • 배경을 담당해주는 background div와
  • form을 하나 넣어주기 (사용자가 입력하는 input + 제출하는 button 요소)

이걸 사용자가 ⊕버튼을 누를때만 모달을 띄우고 싶잖아요?

• App.js

import React, { useState } from "react";
import { MdAddCircle } from "react-icons/md";
import "./App.css";
import Template from "./components/Template";
import TodoInsert from "./components/TodoInsert";
import TodoList from "./components/TodoList";

//외부에서 선언해주기!
//밑에 함수 안에 있으면 함수가 리랜더링 될때마다 계속 처음값으로 돌아가기 때문에..
let nextId = 4;

const App = () => {
    const [insertToggle, setInsertToggle] = useState(false); //추가!

    const [todos, setTodos] = useState([
        {
            id: 1,
            text: "할일 1",
            checked: true,
        },
        {
            id: 2,
            text: "할일 2",
            checked: false,
        },
        {
            id: 3,
            text: "할일 3",
            checked: true,
        },
    ]);

	//추가! toggle창 상태를 바꾸는 함수!
    const onInsertToggle = () => {
        setInsertToggle((prev) => !prev);
    };
    
    //추가! 입력받은 값이 없으면 alert, 아니면 새로운 배열 return!
        const onInsertTodo = (text) => {
        if (text === "") {
            return alert("할 일을 입력해주세요.");
        } else {
            const todo = {
                id: nextId,
                text,
                checked: false,
            };
            setTodos((todos) => todos.concat(todo)); //상태 불변성 유지 push 대신 concat
            nextId++;
        }
    };

    return (
        <Template todoLength={todos.length}>
            <TodoList
                todos={todos}
                onInsertToggle={onInsertToggle}
            />
            <div className='add-todo-button' onClick={onInsertToggle}> //추가!
                <MdAddCircle />
            </div>
            //insertToggle이 true일때만 insert모달창 띄워주기!
            {insertToggle && (
                <TodoInsert
                    onInsertToggle={onInsertToggle}
                    onInsertTodo={onInsertTodo}
                />
            )}
        </Template>
    );
};

export default App;

• TodoInsert.js

import React, { useEffect, useState } from "react";
import { MdAddCircle } from "react-icons/md";
import { TiTrash, TiPencil } from "react-icons/ti";
import "./TodoInsert.css";

const TodoInsert = ({
    onInsertToggle,
    onInsertTodo
}) => {
    const [value, setValue] = useState("");

	//form의 값이 사용자가 입력하여 바뀌면 해당 값으로 value값 변경해주기!
    const onChange = (e) => {
        setValue(e.target.value);
    };

	//form의 기본 속성, button type=submit으로 되어있으니 버튼을 실행하면 자동으로 form을 서버에 제출
    //이때 새로고침이 자동으로 되어버리기 때문에, 이를 막는 e.preventDefault()
    const onSubmit = (e) => {
        e.preventDefault();
        onInsertTodo(value);
        setValue(""); //빈문자열로 value값 초기화
        onInsertToggle(); //창 다시 닫아주기
    };

    return (
        <div>
            <div className='background' onClick={onInsertToggle}></div> //배경을 클릭하면 모달창 닫기!
            <form onSubmit={onSubmit}>
                <input
                    placeholder='add your to-do'
                    value={value}
                    onChange={onChange}
                ></input>
                    <button type='submit'>
                        <MdAddCircle />
                    </button>
                )}
            </form>
        </div>
    );
};

export default TodoInsert;

⭐️ 왜 새로운 항목을 추가할 때, 배열에 push가 아닌 concat을 썼을까?
setTodos((todos) => todos.concat(todo)); //상태 불변성 유지 push 대신 concat
push를 쓰면 기존배열 자체가 변경되지만,
concat을 쓰면 새로운 배열을 리턴하되 기존 배열은 변경되지 않음!

ex) 

const arr1=[1,2,3,4]
arr1.push(5) //5
console.log(arr1) //[1,2,3,4,5]

const arr2=[1,2,3,4]
arr2.concat(5) //[1,2,3,4,5]
console.log(arr2) //[1,2,3,4]​

---

해당 글을 누르면 checked된 상태값 변경해주기 (완료/미완료 상태)

• App.js

//선택한 id와 todos.id의 값이 일치하면 checked상태만 반대로 바꿔주기
const onCheckToggle = (id) => {
        setTodos((todos) =>
            todos.map((todo) =>
                todo.id === id ? { ...todo, checked: !todo.checked } : todo
            )
        );
    };
    
    return (
        <Template todoLength={todos.length}>
            <TodoList
                todos={todos}
                onCheckToggle={onCheckToggle}
                onInsertToggle={onInsertToggle}
                onChangeSelectedTodo={onChangeSelectedTodo}
            />
...생략

TodoList.js→TodoItem으로 onCheckToggle을 props로 계속 전달해준 뒤, 

import React from "react";
import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
import "./TodoItem.css";

const TodoItem = ({
    todo,
    onCheckToggle,
    onInsertToggle
}) => {
    const { id, text, checked } = todo;
    return (
        <div className='TodoItem'>
            <div className={`content ${checked ? "checked" : ""}`}>
                {checked ? (
                    <MdCheckBox
                        onClick={() => {
                            onCheckToggle(id);
                        }}
                    />
                ) : (
                    <MdCheckBoxOutlineBlank
                        onClick={() => {
                            onCheckToggle(id);
                        }}
                    />
                )}
                <div
                    className='text'
                    onClick={() => {
                        onInsertToggle();
                    }}
                >
                    {text}
                </div>
            </div>
        </div>
    );
};

export default TodoItem;

⭐️ 이때, onClick={onCheckToggle(id)}로 하면 안되고, onClick={()=>onCheckToggle(id)} 형태로 보내줘야돼!