[Elm] 상태 관리

강한 타입과 함수형만 해도 꽤 훌륭한 장점이지만, elm의 가장 큰 특징은 깔끔한 상태관리에 있다.

예제를 통해 구조를 한번 분석해보자.

• 버튼과 - 버튼이 있고, 각 버튼을 누를 때마다 숫자가 증감되는 간단한 프로그램을 짜보도록 하겠다.

Elm은 이벤트를 통해 모델을 재할당하는 식으로 상태를 변경하는데, 그러려면 이벤트와 모델의 타입을 정의해줘야 한다.
이벤트 타입 Message는 증가(Increment)와 감소(Decrement) 이벤트를 포함하는 열거 형식으로 정의했다.
그리고 모델 타입 Model은 증감되는 숫자값을 가지는 레코드로 정의했다.

그리고 뷰 함수를 정의하겠다. html을 어떻게 렌더링할 것인지를 표현한다.
모델 객채를 인자로 받고, 'Html 이벤트타입' 을 반환해야 한다.

div, button 등의 Html 함수들은 첫번째 인자로 속성값의 리스트를, 두번째 인자로 innerHtml의 리스트를 받는다.
이벤트는 속성 리스트에 넣을 수 있고 onClick 함수로 매칭될 이벤트값을 넣어줬다.
그리고 text 함수로 모델 내의 숫자값을 문자열로 변환해서 뿌려주도록 했다.\

다음엔 저 onClick으로 발생할 이벤트를 처리해줄, 갱신 함수를 작성해보자.
이벤트와 모델을 받고, 모델을 반환해야 한다. 반환될 모델은 변경된 상태여야 한다.
패턴매칭 구문을 쓰는 것이 깔끔하고 좋다.

난 각각 숫자값을 1씩 증감시키도록 했다.

자 그럼, main 함수에서는 위에서 작성한 것들을 통해 SandBox 값을 생성해서 반환하면 된다. 이게 하나의 컴포넌트를 표현한다고 생각하면 된다.

첫번째 인자 init으로는 모델의 초기값, 두번째 인자 update는 갱신 함수, 세번째 인자 view는 뷰 함수다.

전체 코드다.

--현재 모듈 전부 내보내기
module Main exposing(..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

--진입점
main: Program () Model Message
main =
  Browser.sandbox { init = {number=0}, update = update, view = view }

-- 이벤트 타입
type Message = Increment | Decrement

-- 모델 타입
type alias Model = 
  {
    number: Int
  }

-- 갱신 함수. 이벤트가 던져졌을 때 모델값을 재할당하고 뷰를 갱신한다.
update: Message -> Model -> Model
update message model =
  case message of
    Increment -> {model | number = model.number+1}
    Decrement -> {model | number = model.number-1}

-- 뷰 함수. html 구조를 정의한다. 
view: Model -> Html Message
view model =
  div []
    [ 
      button [ onClick Increment ] [ text "+" ],
      div [] [ text (String.fromInt model.number) ],
      button [ onClick Decrement ] [ text "-" ]
    ]

이대로 컴파일하고 돌리면

기대한대로 잘 동작할 것이다.

참조
https://guide.elm-lang.org/
https://package.elm-lang.org/packages/elm/browser/latest/Browser#sandbox
https://package.elm-lang.org/packages/elm/html/latest/Html