지역상태로 cardlist 만들기 -(1)-

1)목표: 상태를 기억하고 있다가 cardlist에서 해당 상태를 사용하여 랜더링해본다.

2)과정:
데이터를 mock서버에 저장한 것을 가져오는 것이 아닌 지역의 상태만을
사용해서 만들어보는 과정이다. 지역상태는 하나의 컴포넌트에서만 수명이 있는 상태를 말한다. redux와 같은 전역상태관리를 사용하지 않는 한 다른 컴포넌트에서는 상태를 기억하고 있지 못한다.

처음에 나는 input으로 받은 값을 Object로 한꺼번에 props로 처리하여 자녀컴포넌트에 넘기는 방법을 생각했다. 과제에서 요구한 지역상태만으로 해주는 것은 아니지만 익숙한 방법이라서 해보게 되었다. 하지만 결론적으로는 내가 form을 입력하는 즉시 실시간으로 cardlist에 보여지는 기묘한 방법이 되어버렸다.

또한 input onChange 코드를 작성할때 Array가 아닌 Object를 넘겨주는 코드를
작성하면서

{todo.map((list)=>{return (<li>{list.tile}</li>)}}

이 부분이 함수가 아니라는 오류 또한 발생시켰다.
상태를 배열안의 객체로 관리해주는 방법은 아래와 같다.

 //todo = [{...}]의 0번쨰 인덱스를 복사하고 각 name의 value를 동적으로
 //바꿔주는 방법 
 
  const [todo, setTodo] = useState(
   [{
      title: "",
      date: "",
      category: "",
      todo: "",
      file: [],
    }],
);


  const handleChange = (event) => {
    const { name, value, files } = event.target;
    setTodo([{
        ...todo[0],[name]: name === "file" ? files : value,
    }])
    console.log(todo);
  };

그러다가 과거의 인강 자료에서 예전에 만들어두었던 파일을 뒤적거리게 되었다.
내일 이것을 연습해보고 적용해보려고 한다.
차이점이 있다면 나는 cardlist를 만드는 부분이 자식이지만
여기선 form이 list의 자식 컴포넌트이다.
컴포넌트에서 부모와 자식을 결정하는것은 어떤 기준으로 되는 것일까?

//studyform.jsx

import { useState } from "react";

function StudyForm(props) {
  const [formData, setFormData] = useState([
    { id: 1, subject: "", starting: 0 },
  ]);

  const handleChange = (event) => {
    setFormData((formData) => {
      return { ...formData, [event.target.name]: event.target.value };
    });
  };

  const handleSubmit = (evt) => {
    evt.preventDefault();
   props.onAddItem(formData)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div>
          <label>What did you study today?</label>
          <input
            id="subject"
            type="text"
            name="subject"
            value={formData.subject}
            onChange={handleChange}
          />
        </div>
        <div>
          <label>What time did you start this study?</label>
          <input
            id="starting"
            type="number"
            name="starting"
            value={formData.starting}
            onChange={handleChange}
          />
        </div>
        <button>제출하기</button>
      </form>
    </>
  );
}

export default StudyForm;

//studyList.jsx
import { useState } from "react";
import StudyForm from "./studyForm";

function StudyList() {
  const [studies, setStudies] = useState([
    {
      id: 0,
      subject: "fishing",
      starting: 1,
    },
    { id: 1, subject: "swimming", starting: 2 },
    { id: 2, subject: "dancing", starting: 3 },
  ]);

  const handleDelete = (id) => {
    setStudies(
      studies.filter((study)=>study.id!==id)
    );
  }

  const onAddItems = (item) => {
    const newItem= {...item, id:10}
    setStudies((studies)=>[...studies, newItem])
}

  return (
    <>
      <h2>Today I did </h2>
      <ul>
        {studies.map((study) => (
          <li key={study.id}>
            {study.subject}를 {study.starting}시에 시작하였습니다.
            <button onClick={()=>handleDelete(study.id)}>취소</button>
          </li>
        ))}
      </ul>
      <StudyForm onAddItem={onAddItems}/>
    </>
  );
}

export default StudyList;