form태그 onSubmit 상태 끌어올리기

기존 코드: 

const handleAddTask = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const taskValue = e.currentTarget.task.value.trim();
    if (!taskValue) {
      alert('태스크를 입력해주세요.');
      return;
    }

    if (curProjectId === undefined) {
      alert('선택된 프로젝트가 없습니다.');
      return;
    }

    setProjects((prevProjects) => {
      const projectIndex = prevProjects.findIndex(
        (project) => project.id === curProjectId
      );

      if (projectIndex === -1) {
        alert('선택된 프로젝트를 찾을 수 없습니다.');
        return prevProjects;
      }

      const newTaskId =
        prevProjects[projectIndex].tasks.reduce(
          (maxId, task) => Math.max(maxId, task.id),
          0
        ) + 1;

      const newTask = { id: newTaskId, task: taskValue };

      const updatedProjects = [...prevProjects];
      updatedProjects[projectIndex].tasks = [
        ...updatedProjects[projectIndex].tasks,
        newTask,
      ];

      return updatedProjects; // setProjects를 다시 호출하지 않고 업데이트된 배열을 반환
    });
  };

 

매개변수를 이벤트로 받았는데 

gtp 01 mini 모델에서 코드의 개선을 요구했다

개선 사항은 

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  if (task.trim()) {
    onAddTask(task);
    setTask('');
  } else {
    alert('태스크를 입력해주세요.');
  }
};

위와 같이 핸들러를 만들어 하위 컴포넌트에서 값 자체를 보내는 것인데

제시해준 이유와 장점을 보니 바꾸는 게 맞는 것 같다

결론

 

 

제시한 코드는 Controlled Components 패턴을 올바르게 따르고 있습니다. React.FormEvent<HTMLFormElement>가 넘어오는 값이 DOM 요소임에도 불구하고, 입력 필드의 값을 React 상태로 관리하고 있기 때문에 Controlled Components로 간주됩니다. Controlled Components를 사용함으로써 다음과 같은 이점을 누릴 수 있습니다:

 

 

 

• 타입 안전성 강화: TypeScript를 통해 명확한 타입 검증을 수행할 수 있습니다.

 

     form이벤트로 받아오게 되면 TypeScript를 통한 명확한 검증이 안되는데 맞다.

 

 

• 유지보수성과 확장성 향상: 상태 관리가 중앙집중화되어 있어, 폼 구조 변경 시 유연하게 대응할 수 있습니다.

 

   이 부분도 처음에 무슨 소리인줄 몰랐는데 form 객체의 name을 바꿀 경우 어떤 대응도 하지 못한채 런타임에서 에러를 맞이 할 수 있다. 타입스크립트에서 에러관리가 안되는 것은 곡 피해야 한다

 

 

• 일관된 데이터 흐름: 모든 폼 데이터가 React 상태를 통해 흐르므로 데이터의 일관성이 유지됩니다.

 

 

 

 

• 실시간 피드백 및 검증: 사용자가 입력할 때마다 상태가 업데이트되어 실시간으로 입력값을 검증하고 피드백을 제공할 수 있습니다.

 

gtp o1부터 생각을 하기 시작했다는데 상상 이상으로 성능이 좋다