Angular JS 대 React JS

Angular와 React 중에서 선택하는 방법을 잘 모르는 경우 간단한 예제 앱을 확인하여 차이점을 살펴보세요.

Angular와 React는 웹 애플리케이션을 위한 최고의 프론트엔드 프레임워크 중 두 가지입니다. 범위는 약간 다르지만(하나는 개발 플랫폼, 다른 하나는 라이브러리) 주요 경쟁자로 간주됩니다. 두 프레임워크 중 하나를 사용하여 애플리케이션을 개발할 수 있다고 가정하는 것이 안전합니다.

그러면 중요한 질문은 다음과 같습니다. 왜 다른 것보다 하나를 선택하겠습니까? 이 글은 간단한 가입 양식을 개발하여 이에 답하는 것을 목표로 합니다. 양식은 각 프레임워크의 유효성 검사 기능에만 의존합니다.

전제조건

계속하려면 React를 설치할 수 있어야 하며 React 애플리케이션의 작동 방식에 대한 일반적인 이해가 있어야 합니다. 또한 Angular를 설치하고 사용하는 방법도 알아야 합니다.

각 애플리케이션의 파일 구조

React 양식의 파일 구조는 다음과 같습니다.

Angular 형식의 파일 구조는 다음과 같습니다.

위 이미지는 Angular 애플리케이션의 편집된 부분만 표시합니다.

위의 파일 구조에서 두 프레임워크 모두 구성 요소 사용에 크게 의존한다는 것을 알 수 있습니다.

각 양식 애플리케이션에 대한 로직 생성

각 응용 프로그램의 목적은 동일합니다. 모든 입력 필드에 유효한 데이터가 포함된 경우에만 양식이 제출됩니다. 사용자 이름 필드는 하나 이상의 문자를 포함하는 경우 유효합니다. 두 개의 비밀번호 필드는 해당 값이 동일할 경우 유효합니다.

Angular는 템플릿 기반과 반응형이라는 두 가지 양식 생성 방법을 제공합니다. 반응형 접근 방식을 사용하면 개발자가 사용자 정의 유효성 검사 기준을 만들 수 있습니다. 템플릿 기반 접근 방식에는 양식 유효성 검사를 단순화하는 속성이 제공됩니다.

React는 사용자 정의 유효성 검사를 통해서만 양식을 개발할 수 있습니다. 그러나 React는 더 인기 있는 프레임워크이고 더 큰 커뮤니티를 갖고 있으므로 React에서 사용할 수 있는 양식 처리 라이브러리가 많습니다. 여기서의 목표는 외부 라이브러리의 사용을 피하는 것이므로 React 애플리케이션은 사용자 정의 유효성 검사에 의존합니다.

각 애플리케이션에 대한 템플릿 개발

두 애플리케이션 모두 템플릿을 사용하여 최종 HTML 출력을 생성합니다.

각도 HTML 템플릿

form-signup.comComponent.html 파일에는 다음 코드가 포함되어 있습니다.

<div class="form-content">
    <form class="form" #myForm="ngForm">
        <h1>Complete the form to join our community!</h1>
 
        <div class="form-inputs">
            <label for="username" class="form-label">Username:</label>
 
            <input
                id="username"
                type="text" 
                class="form-input"
                placeholder="Enter username"
                name="username"
                ngModel
                required
                #username="ngModel"
            />
 
            <p *ngIf="username.invalid && username.touched">Username required</p>
        </div>
 
        <div class="form-inputs">
            <label for="password" class="form-label">Password:</label>
 
            <input
                id="password"
                type="password"
                name="password"
                class="form-input"
                placeholder="Enter password"
                ngModel
                required
                #password="ngModel"
                [(ngModel)]="model.password"
            />
 
            <p *ngIf="password.invalid && password.touched">password required</p>
        </div>
 
        <div class="form-inputs">
            <label for="passwordvalidate" class="form-label">Password:</label>
 
            <input
                id="confirmpassword"
                type="password"
                name="confirmpassword"
                class="form-input"
                placeholder="Confirm password"
                ngModel
                required
                #password2="ngModel"
                ngValidateEqual="password"
                [(ngModel)]="model.confirmpassword"
            />
 
            <div *ngIf="(password2.dirty || password2.touched) && password2.invalid">
                <p *ngIf="password2.hasError('notEqual') && password.valid">
                   Passwords do not match
               </p>
            </div>
        </div>
 
        <button
           class="form-input-btn"
           type="submit"
           [disabled]="myForm.invalid"
           routerLink="/success"
       >
           Sign Up
       </button>
    </form>
</div>

반응 HTML 템플릿

Signup.js 파일에는 다음 코드가 포함되어 있습니다.

import React from "react";
import useForm from "../useForm";
import validate from "../validateData";
import "./Signup.css"
 
const Signup = ({submitForm}) => {
   const {handleChange, values, handleSubmit, errors} = useForm( submitForm, validate);
 
   return (
       <div className="form-content">
           <form className="form" onSubmit={handleSubmit}>
               <h1>Complete the form to join our community!</h1>
 
               <div className="form-inputs">
                   <label htmlFor="username" className="form-label">Username:</label>
 
                   <input
                       id="username"
                       type="text" 
                       name="username"
                       className="form-input"
                       placeholder="Enter username"
                       value={values.username}
                       onChange={handleChange}
                   />
 
                   {errors.username && <p>{errors.username}</p>}
               </div>
 
               <div className="form-inputs">
                   <label htmlFor="password" className="form-label"> Password: </label>
 
                   <input
                       id="password"
                       type="password"
                       name="password"
                       className="form-input"
                       placeholder="Enter password"
                       value={values.password}
                       onChange={handleChange}
                   />
 
                   {errors.password && <p>{errors.password}</p>}
               </div>
 
               <div className="form-inputs">
                   <label htmlFor="passwordvalidate" className="form-label"> Password: </label>
 
                   <input
                       id="passwordvalidate"
                       type="password"
                       name="passwordvalidate"
                       className="form-input"
                       placeholder="Confirm password"
                       value={values.passwordvalidate}
                       onChange={handleChange}
                   />
 
                   {errors.passwordvalidate && <p>{errors.passwordvalidate}</p>}
               </div>
 
               <button className="form-input-btn" type="submit">Sign Up</button>
           </form>
       </div>
   )
}
export default Signup;

몇 가지 사소한 차이점을 제외하면 두 응용 프로그램 모두 기본 HTML 코드를 사용한다는 것을 알 수 있습니다. 예를 들어 Angular 애플리케이션은 표준 "class" 속성을 사용하여 CSS 클래스를 식별합니다. React는 자체 사용자 정의 "className" 속성을 사용합니다. React는 이를 최종 출력의 표준 “class” 속성으로 변환합니다. UI는 모든 애플리케이션의 성공에 중요한 역할을 합니다. 두 애플리케이션 모두 동일한 HTML 구조와 클래스 이름을 사용하므로 두 애플리케이션 모두 동일한 스타일시트를 사용할 수 있습니다.

위 템플릿의 모든 비표준 속성은 유효성 검사와 관련이 있습니다.

Angular 애플리케이션에 대한 양식 유효성 검사 만들기

Angular의 템플릿 기반 접근 방식의 일부인 유효성 검사 속성에 액세스하려면 app.module.ts 파일에서 FormsModule을 가져와야 합니다.

app.module.ts 파일

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ValidateEqualModule } from 'ng-validate-equal'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';

@NgModule({
    declarations: [
        AppComponent,
        FormSignupComponent,
        FormSuccessComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ValidateEqualModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
 
export class AppModule { }

위 파일에서 FormsModule을 가져오면 이제 다양한 유효성 검사 속성에 액세스할 수 있습니다. Angular HTML 템플릿의 입력 필드에 ngModel 속성을 추가해야 합니다. 위의 Angular 템플릿을 다시 보면 각 입력 요소에 이 속성이 있음을 알 수 있습니다.

FormsModule 및 ngModel은 개발자에게 유효함 및 유효하지 않음과 같은 유효성 검사 속성에 대한 액세스 권한을 제공합니다. Angular HTML 템플릿의 단락 섹션은 #username=”ngModel” 속성을 사용합니다. 입력 필드의 데이터가 유효하지 않고 사용자가 이를 변경한 경우 경고가 생성됩니다.

app.module.ts 파일에는 두 비밀번호를 비교하는 ValidateEqualModule도 표시됩니다. 이렇게 하려면 form-signup.comComponent.ts 파일에 모델 개체를 생성해야 합니다.

form-signup.comComponent.ts 파일

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-form-signup',
    templateUrl: './form-signup.component.html',
    styleUrls: ['./form-signup.component.css']
})
 
export class FormSignupComponent implements OnInit {
    constructor() { }
    ngOnInit(): void {}
    model = {
        password: null,
        confirmpassword: null
    };
}

Angular HTML 템플릿의 두 번째 비밀번호는 위 파일의 모델 객체를 사용하여 해당 값을 첫 번째 비밀번호와 비교합니다.

제출 버튼의 disabled 속성은 모든 입력 필드에 유효한 데이터가 포함될 때까지 비활성화 상태로 유지되도록 합니다. 양식을 제출하면 Angular 라우터의 도움을 받아 사용자에게 성공 페이지가 표시됩니다.

app.routing.module.ts 파일

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormSignupComponent } from './form-signup/form-signup.component';
import { FormSuccessComponent } from './form-success/form-success.component';
 
const routes: Routes = [{
    path: '',
    component: FormSignupComponent
},{
    path: 'success',
    component: FormSuccessComponent
}];
 
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
 
export class AppRoutingModule { }

위의 라우팅 모듈에는 두 가지 경로가 포함되어 있습니다. 양식의 기본 경로와 성공 구성 요소의 성공 경로입니다.

app.comComponent.html 파일

<router-outlet></router-outlet>

위 앱 구성요소 파일의 라우터 아웃렛을 사용하면 사용자가 URL을 사용하여 form-signup 및 form-success 구성요소 사이를 쉽게 탐색할 수 있습니다.

React 애플리케이션에 대한 양식 유효성 검사 만들기

export default function validateData(values) {
    let errors = {}
 
    if (!values.username.trim()) {
        errors.username = "Username required";
    }
 
    if (!values.password) {
        errors.password = "Password required";
    }
 
    if (!values.passwordvalidate) {
        errors.passwordvalidate = "Password required";
    } else if (values.passwordvalidate !== values.password) {
        errors.passwordvalidate = "Passwords do not match";
    }
 
    return errors;
}

validateData.js 파일에는 위의 코드가 포함되어 있습니다. 양식의 각 입력 필드를 모니터링하여 각 필드에 유효한 데이터가 포함되어 있는지 확인합니다.

useForm.js 파일

import {useState, useEffect} from 'react';
 
const useForm = (callback, validate) => {
    const [values, setValues] = useState({
        username: '',
        password: '',
        passwordvalidate: ''
    });
 
    const [errors, setErrors] = useState ({});
 
    const [isSubmitting, setIsSubmitting] = useState (false)
 
    const handleChange = e => {
        const {name, value} = e.target;
 
        setValues({
            ...values,
            [name]: value
        });
    }
 
    const handleSubmit = e => {
        e.preventDefault();
        setErrors(validate(values));
        setIsSubmitting(true);
    }
   useEffect(() => {
        if (Object.keys(errors).length === 0 && isSubmitting) {
            callback();
        }
    }, [errors, callback, isSubmitting]);
 
    return { handleChange, values, handleSubmit, errors };
}
 
export default useForm;

위의 사용자 정의 useForm 후크는 사용자가 양식을 성공적으로 제출했는지 여부를 결정합니다. 이 이벤트는 양식 내의 모든 데이터가 유효한 경우에만 발생합니다.

Form.js 파일

import React from "react";
import Signup from "./Signup";
import Success from "./Success"
import { useState } from "react";
 
const Form = () => {
    const [isSubmitted, setIsSubmitted] = useState(false);
 
    function submitForm() {
        setIsSubmitted(true);
    }
 
    return (
        <div>
            {!isSubmitted ? (<Signup submitForm={submitForm} />) : (<Success />)}
        </div>
    )
}
 
export default Form;

위의 양식 구성요소는 양식이 제출되면 가입 구성요소와 성공 구성요소 간에 보기를 전환합니다.

App.js 파일

import Form from "./components/Form";
 
function App() {
    return (
        <div className="App">
            <Form/>
        </div>
    );
}
 
export default App;

각도 애플리케이션 UI

UI에는 사용자 이름을 한 번 입력하고 비밀번호를 두 번 입력하는 양식이 표시됩니다.

양식에 잘못된 데이터가 포함되어 있으면 페이지에 오류 메시지가 표시됩니다.

양식에 유효한 데이터가 포함되어 있으면 사용자는 이를 성공적으로 제출할 수 있습니다.

리액트 애플리케이션 UI

양식에 잘못된 데이터가 포함된 경우:

양식에 유효한 데이터가 포함된 경우:

React와 Angular의 유사점과 차이점

Angular와 React 프레임워크는 매우 유사하며 동일한 결과를 생성할 수 있습니다. 그러나 이러한 결과를 얻기 위해 사용할 수 있는 도구는 다릅니다. Angular는 라우터 및 양식 라이브러리와 같은 도구에 대한 액세스를 제공하는 개발 플랫폼입니다. React에서 동일한 결과를 얻으려면 개발자의 창의성이 조금 더 필요합니다.