[Angular2] 상태 다루기

참고: angular2에 대한 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다. 

들어가기

이번 글에서부터 지난 시간에 설명한 Component에 살을 붙이기 시작합니다. 오늘은 컴포넌트의 상태값의 개념을 이해해보고 Angular2에서는 어떻게 상태를 관리하는지 간략하게 설명합니다. 이를 위해 Component 클래스에 첫 변수와 메서드를 정의해 봅니다.

 

상태(State)에 대해서

웹사이트에서 상품을 구매할 때 우리는 그림에서 보는 바와 같이 “… 동의”라는 체크박스를 흔하게 접하게 됩니다. 이 때 체크박스는 사용자의 클릭 행위에 따라서 상기의 내용에 동의하는지 여부를 확인하는 용도로 쓰입니다.  그리고 체크박스는 다음의 두가지 의미 중 하나를 반드시 갖게 됩니다.

# 체크박스 상태 의미
1 체크함 내용에 동의
2 체크 안 함 내용을 안 읽었거나 동의하지 않음

따라서 HTML 요소 들이 사용자의 행위에 따른 상태를 가질 수 있습니다. 보통은 예제의 체크박스를 포함하여 Form을 구성하는 input 요소나 셀렉트박스, 라디오박스도 상태를 가집니다.

 

상태정보를 다루는 방식

사용자의 상태 정보들이 결국 우리가 개발하는 웹 어플리케이션의 주요한 관심사이면서 또한 비즈니스 로직에 깊은 연관을 갖게 됩니다. 그렇다면 Angular2가 어떻게 상태정보를 다루는지와 비교하기 위해서 기존에는 HTML요소의 상태 정보를 어떻게 접근해서 활용해 왔는지를 확인해 봅시다.

위의 예제를 그대로 이어서 사용자가 상품 구매를 진행하기 위해서 모든 “…동의” 항목에 체크 했다고 생각해 봅시다. 보통 우리는 사용자가 상품의 구매를 위해서 반드시 “…동의”체크박스를 눌러야 한다는 입력정보의 검증로직을 작성합니다. 이 때 일반적인 웹 어플리케이션의 접근 방식은 체크박스의 “checked” property 상태 정보를 얻기 위해서 DOM API나 jQuery를 사용합니다. 아래 예제를 통해서 확인해 봅시다.

결국 DOM API나 jQuery 둘 중 어느 방식이든지 상태 정보가 필요할 때에 1. 해당 DOM에 접근한 후, 2. DOM의 상태정보를 읽어서, 3. 상태정보에 따라 해당 로직을 수행하는 절차를 거칩니다.

Angular2에서는 위 방식과는 달리 “선언적인” 방식으로 상태정보를 다룰 수 있게 해줍니다. 먼저 실제 라이브 예제를 살펴 봅시다.

이 예제는 왼쪽의 체크박스의 체크 상태 여부를 오른쪽의 버튼을 클릭할 때 alert창을 통해서 확인하는 것입니다. 체크박스의 상태를 변경해 가면서 오른쪽의 버튼을 눌러 정상적으로 체크박스의 상태를 가져오는지 확인해 보세요. 그리고나서 예제의 컴포넌트의 소스를 살펴봅시다.

먼저 위 예제는 javascript가 아닌 Typescript로 작성되어 있고 앞으로도 Typescript를 사용합니다. Typescript에서는 변수에 타입을 선언해 줘야 하는데 타입의 선언은 변수명 뒤에 콜론과 함께 선언해야 합니다. (앞으로 Typescript 문법설명이 필요한 부분이 있을 때 마다 설명합니다. 자세한 설명은 “Typescript 문법 소개(미정)”나, Typescript 매뉴얼을 참고해 주세요)

각 코드에 대한 의미는 아래와 같습니다.

  • 첫 번째 줄: 클래스에 angular에게 Component라는 것을 알려주기 위한 Decorator를 사용하기 위해 import 한 것입니다.
  • 5~8번째 줄:은 Component의 뷰를 구성하는 마크업 정보입니다.
  • 11번째 줄: 클래스에 멤버 변수로 isChecked라는 변수를 선언했습니다.
  • 12~14번째 줄: 클래스의 constructor 메서드 안에 isChecked를 true로 초기화 했습니다.
  • 16~18번째 줄: 버튼의  click 이벤트 시 호출할 메서드를 선언하였습니다.

Component에 template에 익숙하지 않은  [(ngModel)], (click)이 눈에 거슬릴 텐데요. angular1을 경험해 보신 분들은 two-way binding을 알고 계셔서 눈치를 채셨겠지만, 데이터 바인딩에 대해서는 다음 글(데이터 바인딩)에서 설명 하기로 합니다.

이 예제가 보여주는 핵심은 Angular2에서는 상태정보를 Component의 멤버변수로 선언하여 이를 체크박스의 체크 상태와 자동으로 연결해 준다는 것입니다. 이로 인해 우리는 DOM API나, jQuery와 같이 직접 DOM에 접근해서 상태정보를 읽는 노력을 할 필요가 없습니다. Component안에서 상태정보를 직접 관리할 수 있습니다.

이 방식의 목적은 단순히 angular2가 사용자의 행위에 의해 변경된 HTML요소의 상태를 자동으로 Component의 멤버변수에 반영해 주어 편의를 제공해 주는 것에 있는 것이 아닙니다. 비즈니스 로직에 필요한 상태정보를 얻기 위해 비본질적인 DOM의 접근하는 로직은 프레임워크에게 위임하고 Component 안에서 뷰의 비즈니스로직 처리에만 집중하게 해주는 것이 좀 더 근본적인 목표입니다.

물론 “[(ngModel)]”과 같이 자동으로 데이터를 반영해 주기 위한 최소한의 정보를 마크업에 담아야 하기 때문에 완벽하게 뷰와 Component간의 종속성을 끊을 수는 없습니다. 또한 실제 어플리케이션을 개발하다 보면 직접 DOM에 접근해야할 일도 있고 jQuery를 쓰게 될 수도 있습니다.

하지만, 최대한 뷰에 종속되는 로직을 줄이거나 한군데에 모으고 Component의 역할을 비즈니스로직 처리와 이벤트 핸들링에 초점을 맞추는 것이 중요한 접근 방식입니다. (참고: 추후에 Service와 의존성 주입을 설명하면서 비즈니스로직은 Service로 빠지게 됩니다.)

 

정리

웹어플리케이션에서 HTML요소들 중에 사용자의 행위에 따라 상태정보를 가지는 것들이 있습니다. 이 상태정보는 기존 방식에서는 DOM에 접근해야만 얻을 수 있었습니다. Angular2에서는 Component는 순수하게 상태정보를 다루고 사용하는 역할에만 집중하고 DOM에 접근하는 역할은 angular 프레임워크 내부의 동작에 위임합니다. 다음 글에서 angular가 자동으로 DOM의 상태를 Component 내부의 상태에 반영해 주는 원리인 “데이터 바인딩”에 대해서 살펴보기로 합니다.

Angular2 글 목록보기