프론트엔드 노트

프론트엔드 개발에서 동적 폼 생성은 사용자 경험을 향상시키는 중요한 요소입니다. 특히, TypeScript는 정적 타입 체크를 통해 코드의 안정성을 높여주므로 동적 폼 생성 작업에 매우 유용합니다. 이번 포스트에서는 TypeScript를 사용하여 동적 폼을 생성하는 방법을 살펴보겠습니다.

기본 개념

동적 폼은 사용자 입력에 따라 필드가 추가되거나 제거되는 폼을 의미합니다. 예를 들어, 사용자가 "추가" 버튼을 클릭하면 새로운 입력 필드가 생성되고, 필요하지 않은 필드는 삭제할 수 있습니다. 이를 통해 사용자 맞춤형 입력을 받을 수 있습니다.

프로젝트 설정

우선, TypeScript 프로젝트를 설정해봅시다. create-react-app을 이용하여 새로운 프로젝트를 생성하고 TypeScript를 추가합니다.

npx create-react-app dynamic-form --template typescript
cd dynamic-form

설치가 완료되면, 필요한 패키지를 설치합니다. 기본적으로 React와 TypeScript가 설치되어 있습니다.

폼 컴포넌트 작성하기

이제 동적 폼을 구현할 컴포넌트를 작성해보겠습니다. src 폴더 안에 DynamicForm.tsx 파일을 생성합니다.

import React, { useState } from 'react';

interface FormField {
  id: number;
  value: string;
}

const DynamicForm: React.FC = () => {
  const [formFields, setFormFields] = useState<FormField[]>([{ id: 1, value: '' }]);

  const handleChange = (id: number, value: string) => {
    setFormFields(fields => 
      fields.map(field => (field.id = id ? { ...field, value } : field))
    );
  };

  const handleAddField = () => {
    const newField = { id: formFields.length + 1, value: '' };
    setFormFields([...formFields, newField]);
  };

  const handleRemoveField = (id: number) => {
    setFormFields(fields => fields.filter(field => field.id ! id));
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log('Submitted Fields:', formFields);
  };

  return (
    <form onSubmit={handleSubmit}>
      {formFields.map(field => (
        <div key={field.id}>
          <input
            type="text"
            value={field.value}
            onChange={(e) => handleChange(field.id, e.target.value)}
          />
          <button type="button" onClick={() => handleRemoveField(field.id)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={handleAddField}>Add Field</button>
      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicForm;

코드 설명

상태 관리: useState를 사용하여 폼 필드 배열을 상태로 관리합니다. 초기값으로는 하나의 입력 필드를 설정합니다.
상태 변경 함수: handleChange는 특정 필드의 값을 업데이트합니다. handleAddField는 새로운 필드를 추가하고, handleRemoveField는 특정 필드를 제거합니다.
폼 제출: handleSubmit 함수에서 현재 입력된 필드들의 값을 콘솔에 출력합니다. 실제 애플리케이션에서는 이 부분에서 서버로 데이터를 전송할 수 있습니다.

컴포넌트 사용하기

이제 App.tsx에서 DynamicForm 컴포넌트를 호출해 보겠습니다.

import React from 'react';
import DynamicForm from './DynamicForm';

const App: React.FC = () => {
  return (
    <div>
      <h1>Dynamic Form</h1>
      <DynamicForm />
    </div>
  );
};

export default App;

스타일링 추가하기

폼의 가시성을 높이기 위해 CSS를 추가할 수 있습니다. src/App.css 파일에 간단한 스타일을 추가해 보세요.

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-top: 10px;
  padding: 8px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

마무리

이번 포스트에서는 TypeScript를 사용하여 동적 폼을 생성하는 방법을 살펴보았습니다. 이 예제를 통해 기본적인 폼 관리 방법을 이해하고, 필요한 경우 더 복잡한 로직을 추가하여 확장할 수 있게 됩니다. 동적 폼은 사용자 맞춤형 입력을 가능하게 하여 UX를 향상시키는 훌륭한 도구입니다. 앞으로 더 나아가 다양한 입력 타입과 유효성 검사 기능 등을 추가해보며 깊이 있는 동적 폼을 만들어보시길 바랍니다.

TypeScript로 동적 폼 생성하기