[NGXS] Control Flow

 

 

 

NGXS는 Angular 상태 관리 패턴이자 라이브러리이다.

React에서 상태 관리를 하기 위해 Redux를 사용했다면, Angular에서는 NGXS를 사용한다고 생각하면 좀 쉽다.

NGXS는 Redux에서 사용되는 CQRS 패턴을 기반으로 모델링되었지만, 클래스 및 데코레이터와 같은 최신 TypeScript 기능을 사용하여 상용구를 줄였다.

 

 

NGXS에서 주요 개념은 Store, Actions, State, Selects가 있다.

이 4가지 개념들의 흐름은 아래 그림과 같다.

 

 

NGXS Control Flow

 

React에서 Redux를 공부할 때 봤던 그림과 비슷한데, 이 그림만 보면 완전히 이해가 잘 되지 않았다.

documents 페이지에서는 다 영어로 되어있어서, 제대로 이해하기 힘들었다(ㅠㅠ)

그래서 ngxs에서 제공하는 샘플 프로젝트를 찾아보았고, 프로젝트를 실제로 실행시켜보면서 어떻게 이루어지는지 이해하게 되었다.

 

 

 

 

NGXS Sample Project를 이용해서 NGXS Control Flow 이해하기

참고: https://github.com/ngxs/ngxs-examples

ngxs/ngxs-examples

위 github을 클론해서 살펴보면 총 4개의 샘플 프로젝트가 있는데, 여기서 wiki-search라는 프로젝트를 통해 NGXS Control Flow에 대해 알아보려고 한다.

 

 

 

 

 

 

npm install 한 뒤 실행시켜보면, wiki-search 프로젝트의 기능은 아래와 같다.

wiki-search 프로젝트를 실행하면 나타나는 화면

1. article 검색하기

2. favorite articles에 article 추가/삭제하기

3. favorite article 내용 조회하기

 

이렇게 크게 3가지 기능이 나와있는데, 오늘은 1, 2번을 통해 Control Flow를 알아보려고 한다.

 

 

 

 

1. article 검색하기

---

먼저 article 검색의 경우, httpClient 모듈을 통해 API를 호출해서 사용자가 입력한 값에 해당하는 article을 검색한다.

 

[html 파일]

html 파일을 살펴보면, 엔터키를 누르거나, Find 버튼을 클릭하면 onSearch() 메소드를 호출하도록 되어있다.

onSearch() 메소드는 위 html 파일을 템플릿 파일로 가지고 있는 component.ts 파일에서 찾아볼 수 있다.

 

 

[component 파일]

search.component.ts 파일

컴포넌트 파일의 onSearch() 메소드를 살펴보면, 44번째 줄에서 input에 입력된 값을 바탕으로 article을 검색하는 부분이 나와있다.

이 때 this.api는 캡쳐화면에서 잘렸지만, 원본 소스코드를 살펴보면 service.ts의 객체를 나타낸다. 그래서 this.api.search() 메소드는 service.ts 파일에 있는 search() 메소드를 의미한다.

그럼, service.ts 파일을 살펴보자.

 

 

[service 파일]

service 파일을 살펴보면 HttpClient의 get() 메소드를 이용해서 검색 API를 호출하고 있다.

(여기서 url 파라미터 부분에 full url이 아닌 end-point 부분만 작성했는데, 이 부분은 잠시 무시하고 넘어간다.)

 

HttpClient.get 함수는 HTTP 응답으로 받은 몸체(body) 를 반환하는데, 이 객체는 타입이 지정되지 않은 JSON 객체로 처리된다. 그래서 이 객체에 타입을 지정하려면 <SearchResult>와 같이 제네릭을 지정하면 된다.

searchResult interface

HTTP GET 요청 결과를 Observable<SearchResult> 객체를 받아 다시 component 파일로 전달한다.

 

 

 

[component 파일]

search.component.ts 파일

다시 component 파일로 돌아와서 전달받은 Observable 객체를, pipe() 메소드를 이용해서 객체를 사용자 요구에 맞게 가공하고(여기서는  별도로 가공하지 않고 프로퍼티 값만 변경했다.) subscribe() 메소드를 이용해서 프로퍼티를 업데이트했다.

 

searchItems 라는 프로퍼티가 업데이트되면, 템플릿 파일(html 파일)에서 searchItems를 사용하는 부분이 업데이트된다.

 

 

 

 

 

위 과정을 그림으로 그려보면 아래와 같다.

 

 

 

 

 

 

 

 

 

 

 

2. favorite articles에 article 추가하기

---

조회한 article들 우측에 있는 별표 아이콘을 클릭해서 즐겨찾는 articles에 추가해보자.

 

[html 파일]

search.component.html

템플릿 파일에서 별표 아이콘을 클릭하면 addFavorite(item) 메소드가 실행된다. 여기서 item은 추가하고자하는 article의 정보가 담겨져 있다.

 

 

[component 파일]

search.component.ts

addFavorite(item) 메소드가 실행되면, 'AddFavorite'라는 action을 dispatch 한다.

 

 

 

[action 파일]

[state 파일]

wiki-article.state.ts

action을 dispatch하면, action 파일의 AddFavorite이 호출되고, @Action(AddFavorite) 데코레이터를 통해 state 파일 내의 addFavorite() 메소드가 실행된다.

addFavorite() 메소드를 살펴보면, 인자로 받은 favoriteItem을 store의 favorites라는 리스트에 push하는 것을 알 수 있다.

 

 

여기서 state에 저장된 favorites 리스트는 state 파일 상단을 보면,

위와 같이 WikiArticlesState를 타입으로 하는 @state 데코레이터를 통해 호출할 수 있다.

 

 

 

이렇게 state 내 favorites 값이 업데이트가 되면, @select 데코레이터를 통해 favorites 프로퍼티를 사용하고 있는 component 파일에 업데이트되었다고 알려준다.

 

favorites.component.ts

해당 프로퍼티가 업데이트되면 템플릿 파일(html) 파일에도 해당 프로퍼티를 사용하고 있는 부분에서 다시 업데이트가 발생한다.

 

 

 

이 과정을 그림으로 그려보면 아래와 같다.