따꼼 트러블 슈팅 | 아이 등록하기 2단계 페이지: 이전 버튼 문제 해결 과정

1. 문제 상황

• 2단계에서 '이전' 버튼을 누르면 1단계 페이지로 돌아가기는 하지만, 이전 단계에서 입력한 내용이 폼에 유지되지 않는 문제가 발생했습니다.
• 다행히 supabase의 child 테이블에는 데이터가 저장되어 있는 상태입니다.

 

2. 해결 과정

1) RegisterForm 컴포넌트 수정

• RegisterForm 컴포넌트에서 RegisterChildInfo으로 childInfo를 props로 전달하여, 이전에 입력된 정보가 유지될 수 있도록 설정했습니다.

const RegisterForm: React.FC<ChildCardProps> = ({ userId }) => {
  // `child`가 없을 경우 빈 객체로 초기화하여 상태 관리
  const [childInfo, setChildInfo] = useState<Partial<Child>>({});

 

• RegisterChildInfo에 childInfo를 전달하여 기존 정보를 불러옵니다.

<RegisterChildInfo
  onNext={handleNext} 
  userId={userId} 
  childInfo={childInfo} // `childInfo`를 props로 전달
/>

 

2) RegisterChildInfo 컴포넌트 수정

• RegisterChildInfo 컴포넌트에서 childInfo를 받아 폼의 defaultValues에 기존 값을 설정하여, 입력한 내용이 폼에 유지되도록 수정했습니다.

import { Child } from "@/types/childType";

interface RegisterChildInfoProps {
  onNext: (data: Partial<Child>) => void;
  userId: string;
  childInfo: Partial<Child>; // `childInfo` 타입 추가
}

const RegisterChildInfo = ({ onNext, userId, childInfo }: RegisterChildInfoProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: childInfo.name || "",  // `childInfo`에서 이름 가져오기
      birth: childInfo.birth || "", // `childInfo`에서 생년월일 가져오기
      notes: childInfo.notes || ""  // `childInfo`에서 메모 가져오기
    }
  });

  return (
    <div>
      {/* 코드 */}
    </div>
  );
};

export default RegisterChildInfo;

 

3. 결과

• 이제 '이전' 버튼을 누르고 돌아가도 입력한 내용이 폼에 유지됩니다.
• RegisterForm에서 childInfo를 상태로 관리하고, RegisterChildInfo에 해당 상태를 props로 전달함으로써 폼의 상태를 보존하는 방식을 배울 수 있었습니다.

 

4. 배운 점

1. 폼 상태 유지의 중요성
   '이전' 버튼 기능을 통해 폼을 단계적으로 이동할 때, 상태가 유지되지 않으면 사용자 경험이 크게 저하될 수 있음을 배웠습니다. 특히, 한 번 입력한 정보가 사라지지 않도록 폼의 상태를 유지하고 관리하는 것이 중요하다는 것을 깨달았습니다.
2. Props를 이용한 데이터 전달
   여러 단계로 이루어진 폼에서 각 단계 간에 데이터를 전달하고 상태를 유지하려면 상위 컴포넌트에서 상태를 관리하고 하위 컴포넌트로 전달하는 방식이 효과적임을 알게 되었습니다. childInfo를 RegisterChildInfo으로 props로 전달하여 폼의 데이터를 유지하는 구조가 유용했습니다.
3. 기본값 설정으로 상태 초기화 문제 해결
   useForm의 defaultValues 옵션을 통해 초기 값을 설정하여, 폼 컴포넌트가 마운트될 때 이전 단계에서 입력한 값을 쉽게 가져올 수 있었습니다. 이를 통해 폼의 데이터를 쉽게 초기화하고 유지할 수 있는 방법을 배웠습니다.
4. 상태 초기화 및 관리의 필요성
   useState를 사용하여 상태를 빈 객체로 초기화하는 방법을 배우며, 사용자 입력 상태를 안전하게 관리하는 방법을 익혔습니다. 특히, 상태가 누락되거나 잘못 초기화될 가능성을 줄이는 방식에 대해 이해가 깊어졌습니다.
5. 폼 단계 간 데이터 흐름에 대한 이해
   폼의 여러 단계에서 데이터를 흐르게 하려면, 상태를 상위 컴포넌트에서 관리하고 필요한 하위 컴포넌트로 전달하는 방식을 사용해야 함을 알게 되었습니다. 이를 통해 페이지 간의 상태 관리 및 데이터 흐름을 보다 체계적으로 이해하게 되었습니다.

이번 문제 해결을 통해 프로젝트에서 폼 데이터 관리와 상태 유지의 기본 원리를 깊이 이해하고, 실전에서 이를 어떻게 적용할 수 있는지에 대한 좋은 경험을 얻었습니다.