[TIL/React] 2023/04/20

src/App.js

import React, { useState } from "react";
import InputSection from "./Components/InputSection";
import TodoSection from "./Components/TodoSection";
import CompleteSection from "./Components/CompleteSection";

function App() {
  // inputValue와 todos에 대한 상태
  const [inputValue, setInputValue] = useState({
    Title: "",
    subTitle: "",
    Desc: "",
  });
  const [todos, setTodos] = useState([]);

  // 완료 여부를 구분하기 위해 filter method를 통해 생성한 두 가지 배열
  const completeArray = todos?.filter((todo) => todo?.isDone === true);
  const noCompleteArray = todos?.filter((todo) => todo?.isDone === false);

  // Input Field의 값이 변경될 떄 호출되는 함수
  const handleInputValue = (event) => {
    const { value, name } = event?.target;
    setInputValue((prev) => {
      return { ...prev, [name]: value };
    });
  };
  // Add Button에 적용되는 함수
  const handleAddClick = () => {
    setTodos((prev) => {
      return [
        ...prev,
        {
          ...inputValue,
          isDone: false,
          id: todos?.length + 1,
        },
      ];
    });
    setInputValue({
      Title: "",
      subTitle: "",
      Desc: "",
    });
  };
  // Delete Button에 적용되는 함수
  const handleDeleteClick = (id) => {
    const index = todos.findIndex((todo) => todo.id === id);
    if (index === -1) return;
    setTodos((prev) => prev.filter((_, i) => i !== index));
  };

  // Complete Button에 적용되는 함수
  const handleCompleteClick = (todo, index) => {
    let newArray = [...todos];
    newArray?.splice(index, 1, { ...todo, isDone: true });
    setTodos(newArray);
  };
  // Reset Button에 적용되는 함수
  const handleResetClick = (id) => {
    let newArray = [...todos]?.map((item) =>
      item?.id === id ? { ...item, isDone: false } : item
    );
    setTodos(newArray);
  };

  console.log({ todos });
  return (
    <>
      <InputSection
        inputArray={["Title", "subTitle", "Desc"]}
        inputValue={inputValue}
        handleInputValue={handleInputValue}
        handleAddClick={handleAddClick}
      />
      <TodoSection
        noCompleteArray={noCompleteArray}
        handleDeleteClick={handleDeleteClick}
        handleCompleteClick={handleCompleteClick}
      />
      <CompleteSection
        completeArray={completeArray}
        handleResetClick={handleResetClick}
        handleDeleteClick={handleDeleteClick}
      />
    </>
  );
}

export default App;

src/Components/InputSection.js

import React from "react";

const InputSection = ({
  inputArray,
  inputValue,
  handleInputValue,
  handleAddClick,
}) => {
  console.log({ inputValue });
  return (
    <div>
      <h1>TodoList ✍️</h1>
      {inputArray?.map((name, idx) => {
        return (
          <div key={idx}>
            <p>{name}</p>
            <input
              name={name}
              value={inputValue?.[name]}
              onChange={handleInputValue}
            />
          </div>
        );
      })}

      <button onClick={handleAddClick}>Add</button>
    </div>
  );
};

export default InputSection;

src/Components/TodoSection.js

import React from "react";

const TodoSection = ({
  noCompleteArray,
  handleDeleteClick,
  handleCompleteClick,
}) => {
  return (
    <div>
      <h2>Todo Section 👨‍💻</h2>
      {noCompleteArray?.map((todo) => {
        return (
          <div key={todo?.id}>
            <div>
              <button onClick={() => handleCompleteClick(todo?.id)}>
                Complete
              </button>
              <button onClick={() => handleDeleteClick(todo?.id)}>
                Delete
              </button>
            </div>
            <span>Title: {todo?.Title}</span>
            <span>subTitle: {todo?.subTitle}</span>
            <span>Desc: {todo?.Desc}</span>
          </div>
        );
      })}
    </div>
  );
};

export default TodoSection;

src/Components/CompleteSection.js

import React from "react";

const CompleteSection = ({
  completeArray,
  handleResetClick,
  handleDeleteClick,
}) => {
  return (
    <div>
      <h2>Complete Section 🔥</h2>
      {completeArray?.map((todo) => {
        return (
          <div key={todo?.id}>
            <div>
              <button onClick={() => handleResetClick(todo?.id)}>Reset</button>
              <button onClick={() => handleDeleteClick(todo?.id)}>
                Delete
              </button>
            </div>
            <span>Title: {todo?.Title}</span>
            <span>subTitle: {todo?.subTitle}</span>
            <span>Desc: {todo?.Desc}</span>
          </div>
        );
      })}
    </div>
  );
};

export default CompleteSection;

id를 어떻게 적용해야 할까...?