import { useRef } from 'react';

const title = useRef();
const description = useRef();
const dueDate = useRef();

function handleSave() {
  const enteredTitle = title.current.value;
  const enteredDescription = description.current.value;
  const enteredDueDate = dueDate.current.value;
  
  // 수집된 데이터를 상위 컴포넌트로 전달
  onAdd({
    title: enteredTitle,
    description: enteredDescription,
    dueDate: enteredDueDate
  });
}

import { forwardRef } from 'react';

const Input = forwardRef(function Input({ label, textarea, ...props }, ref) {
  return (
    <p>
      <label>{label}</label>
      {textarea ? (
        <textarea ref={ref} {...props} />
      ) : (
        <input ref={ref} {...props} />
      )}
    </p>
  );
});

// App.jsx
function handleAddProject(projectData) {
  setProjectsState(prevState => {
    const newProject = {
      ...projectData,
      id: Math.random() // 간단한 ID 생성
    };

    return {
      ...prevState,
      projects: [...prevState.projects, newProject] // 기존 배열 복사 후 새 프로젝트 추가
    };
  });
}

// ...렌더링 부분
<NewProject onAdd={handleAddProject} />

<Input type="text" ref={title} label="Title" />
<Input textarea ref={description} label="Description" />
<Input type="date" ref={dueDate} label="Due Date" />