더욱 효율적으로! NgRx Entities로 Angular 코드 단순화하기

2024-10-28 10:04:41

angularjavascriptfrontendngrx

Angular 코드에서 NgRx Entities로 단순화하기

Angular 개발자라면 NgRx를 통해 상태 관리를 경험해 보셨을 것입니다. NgRx는 애플리케이션 상태를 보다 엄격하고 체계적으로 관리할 수 있게 도와주지만, 때때로 반복되는 보일러플레이트 코드로 인해 복잡함을 느낄 수 있습니다. 특히 CRUD 작업을 위한 셀렉터와 액션의 수가 많아지면 그 복잡함은 배가 됩니다. 이런 문제를 해결하기 위해 우리는 NgRx Entities를 활용할 수 있습니다. 이 글에서는 NgRx Entities를 통해 코드의 복잡성을 줄이고 유지보수성을 향상시키는 방법을 살펴보겠습니다.

NgRx Entities란 무엇인가요?

NgRx Entities는 NgRx의 확장 모듈로, 대규모 데이터 컬렉션을 보다 쉽게 관리할 수 있도록 돕는 유틸리티 집합입니다. 이러한 유틸리티는 상태에서 엔티티를 추가, 업데이트, 제거하는 작업을 단순화하고, 데이터 스토어에서 엔티티를 선택하는 작업도 용이하게 합니다.

왜 NgRx Entities를 사용해야 할까요?

특히 대규모 애플리케이션에서 CRUD 작업을 수동으로 관리하기 위해 코드를 작성하다 보면 반복되는 부분이 많아지게 됩니다. 이런 작업은 시간이 많이 들고 실수를 유발할 수 있습니다. NgRx Entities는 이러한 반복 작업을 줄여주어 코드를 간결하게 만들어 줍니다. 이는 기술 부채를 줄이고, 대규모 애플리케이션의 상태 관리를 단순화하는 데 큰 도움이 됩니다.

NgRx Entities의 작동 방법

EntityState

EntityState 인터페이스는 NgRx Entities의 핵심입니다. 이는 엔티티 ID 배열과 각 엔티티가 저장된 사전 형태의 컬렉션을 유지합니다.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

EntityAdapter

EntityAdapter는 createEntityAdapter 함수를 통해 생성됩니다. 이 어댑터는 엔티티를 추가, 업데이트, 제거하는 등 상태 관리를 쉽게 할 수 있는 여러 방법을 제공합니다.

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

프로젝트 설정 및 NgRx Entities 사용하기

프로젝트 설정을 진행하고, NgRx Entities를 사용하여 상태 관리 및 CRUD 작업을 단순화하는 방법에 대한 단계별 지침을 소개합니다.

프로젝트 설정

먼저 NgRx가 이미 설치된 프로젝트를 설정합니다. 아래 명령을 사용하여 기본 CRUD 셋업이 포함된 브랜치로 이동하세요:

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

NgRx Entities 설치

NgRx Entities를 설치하여 본격적인 리팩토링을 진행합니다. 다음 명령어를 실행하세요:

npm i
ng add @ngrx/entity

상태 리팩토링

먼저 places.state.ts 파일을 열어 상태를 EntityState<Place>를 확장하도록 수정합니다:

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

상태 관리의 복잡함을 줄이기 위해 EntityAdapter를 사용하여 리스트를 자동으로 관리하도록 합니다.

액션 리팩토링

이전에는 수동으로 엔티티의 업데이트 및 수정 작업을 처리했습니다. 이제는 Update<T>를 활용하여 부분적인 업데이트를 처리할 수 있습니다:

import { Update } from '@ngrx/entity';

export const PlacesPageActions = createActionGroup({
  source: 'Places',
  events: {
    'Load Places': emptyProps(),
    'Add Place': props<{ place: Place }>(),
    'Update Place': props<{ update: Update<Place> }>(),
    'Delete Place': props<{ id: string }>(),
    'Select Place': props<{ place: Place }>(),
    'UnSelect Place': emptyProps(),
  },
});

리듀서 리팩토링

리듀서에서의 NgRx Entities 사용은 보일러플레이트 코드를 크게 줄여줍니다. EntityAdapter를 사용하여 추가, 업데이트, 제거 작업을 간단하게 처리할 수 있습니다:

import { createReducer, on } from '@ngrx/store';
import { adapter, plac...

리듀서를 단순화하여 코드를 정리함으로써 유지보수성이 강화됩니다.

결론

NgRx Entities를 사용하면 Angular 애플리케이션의 상태 관리가 더욱 쉬워집니다. 특히 대규모 애플리케이션에서는 이러한 보일러플레이트의 감소가 중요하게 작용할 수 있습니다. 이제 여러분의 프로젝트에 NgRx Entities를 적용하여 간단하고 유연한 상태 관리의 이점을 경험해보시기 바랍니다.

R_11