[angular] Angular 폼 데이터 유지

26 Dec 2023

angular

Angular 애플리케이션에서 폼 데이터를 유지하려면 서버로 데이터를 전송하지 않고도 사용자 입력을 저장할 수 있어야 합니다. 이를 위해 Angular에서는 폼 데이터를 캡처하고 저장하는 여러 방법을 제공합니다. 이 포스트에서는 이러한 방법에 대해 자세히 알아보겠습니다.

내부 상태 관리

Angular에서는 Reactive Forms를 사용하여 폼 데이터를 쉽게 관리할 수 있습니다. Reactive Forms는 FormGroup과 FormControl을 사용하여 폼의 상태를 관리합니다.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.email)
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // Save form data to the backend or local storage
    }
  }
}

로컬 저장소 활용

Angular에서는 localStorage를 사용하여 브라우저 로컬 스토리지에 데이터를 저장할 수 있습니다.

// Save form data to local storage
localStorage.setItem("formData", JSON.stringify(this.myForm.value));

// Retrieve form data from local storage
const formData = JSON.parse(localStorage.getItem("formData"));

이렇게 하면 사용자가 페이지를 새로 고침하거나 다시 방문해도 이전에 입력한 데이터를 유지할 수 있습니다.

세션 저장소 활용

Session Storage를 사용하면 브라우저 세션 스토리지에 데이터를 저장할 수 있습니다. 이 방법을 사용하면 데이터가 세션 동안만 유지됩니다.

// Save form data to session storage
sessionStorage.setItem("formData", JSON.stringify(this.myForm.value));

// Retrieve form data from session storage
const formData = JSON.parse(sessionStorage.getItem("formData"));

이러한 방법으로 Angular 애플리케이션에서 폼 데이터를 유지할 수 있습니다. 사용자 경험을 향상시키기 위해 폼 데이터를 잘 관리하여 유용한 애플리케이션을 만들어 보세요.

참고 자료

위와 같이 Angular 애플리케이션에서 폼 데이터를 유지하는 방법에 대해 알아보았습니다. 명확한 개념과 예제 코드를 통해 실용적인 사용법을 이해할 수 있었을 것으로 기대합니다.