HTML 필터링 방법 비교 javascript v.s. 프로그래시브 프레임워크(Veu, React, Angular) [Feat. Ionic]

아이오닉(앵귤러)로 Array데이터를 필터링 하는 방법입니다.

 

기존방식: DOM을 직접 수정. Class나 style를 추가하여 DOM에 값을 추가하는 방식이었습니다.

jQuery 및 elemnt에 직접 접근하여 Class 추가 및 제거, style의 display값을 변경합니다.

기존의 방식처럼 element에 속성 값을 추가하려고 하면 에러가 발생합니다.

렌더링 할 때 제어할 수 없는 값이 추가되어 있기 때문입니다.

 

그렇다면 어떻게 해야할까요?

 

프로그래시브 프레임워크에서는 Array data를 직접 서버사이드 렌더링 처럼 처리합니다.

1. 데이터 javascript로 배열 데이터 필터

2. HTML 렌더링

<!-- HTML -->
<ion-header>
  <ion-toolbar>
    <ion-title>숫자 필터</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-item>
    <ion-button color="success" fill="solid" slot="end" (click)="filterArray($event.target, 1)" clickable>짝수</ion-button>
    <ion-button color="medium" fill="solid" slot="end" (click)="filterArray($event.target, 0)" clickable>홀수</ion-button>
  </ion-item>
  <ion-list>
    <ion-card >
      <ion-card-header color="primary">
        <ion-label>위에 필터를 눌러보세요.</ion-label>
      </ion-card-header>
      <ion-item *ngFor="let number of filteredArray; let idx = index;">
        <ion-grid>
          <ion-row>
            <ion-col size-sm="2">
              <ion-label position="floating">{{number}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ion-card>
  </ion-list>
</ion-content>

// angular
import { Component, OnInit } from '@angular/core';

  filteredArray: number[] = [...this.array];
  
  private _array: number[] = [1,2,3,4,5,6];
  private _filter: number[] = [];
  
  constructor() {}

  filterArray(element: HTMLElement, reminder: number) {
    this._addToFilter(reminder);
    if(this._filter.length > 0) {
      this._filter.forEach(_reminder => this._filterByReminder(_reminder))
    }
    this._toggleButtonOutline(element);
  }
  
  private _filterByReminder(reminder: number) {
    this.filteredArray = this.filteredArray.filter(number => number % 2 == reminder);
  }  

  private _addToFilter(reminder) {
    if(this._filter_has(reminder)) {
      this._resetArray();
      this._filter_pop(reminder);
    } else {
      this._filter.push(reminder);
    }
  }

  private _filter_has(reminder: number): boolean {
    return this.filter.indexOf(reminder)>-1;
  }

  private _resetArray() {
    this.filteredArray = [...this._array]
  }

  private _filter_pop(target: number) {
    this._filter = this._filter.filter(num => num != target);
  }

  private _toggleButtonOutline(button: HTMLElement) {
    button['fill'] = button['fill'] == "outline" ? "solid" : "outline";
  }

필터 버튼 보이는 것 때문에 매쏘드에서 reminder의 개념이 헤깔리네요...