[Elm] Attributes.batch에서 Attributes를 더 유연하게 다루십시오.

Elm에서 View의 공통화를 하고 싶을 때, 별도로 View를 열심히 만들지 않아도 Attribute를 "Mixin"으로 써서 돌리면 좋다는 점이 있습니다.

예를 들면

module Mixin exposing (..)

import Html exposing (Attribute)
import Html.Attributes as Attributes

bigButton : Attribute msg
bigButton =
    Attributes.class "button button_big"

같은 함수를 정의하고 사용하는 이미지입니다.

이 예제는 간단하기 때문에 따로 이것으로도 좋지만, 경우에 따라서는 복수의 Attribute 를 세트로 해 사용해 주고 싶은 것이 자주 있습니다.

module Mixin exposing (..)

import Html exposing (Attribute)
import Html.Attributes as Attributes

submitButton : Bool -> List (Attribute msg)
submitButton sending =
    [ Attributes.class "button"
    , Attributes.class "button_submit"
    , Attributes.disabled sending
    ]

이렇게 리스트로 하는 것만입니다만, 이것을 View로 부르려고 하면 어떻게 됩니까?

module Main exposing (..)

import Html exposing (Html)
import Html.Attributes as Attributes
import Mixin

submitButton : Model -> Html msg
submitButton model =
    Html.button
        (Mixin.submitButton model.sending)
        []

이것을 보는 한은 특히 문제 없을 것 같네요!

그럼, Mixin.bigButton 와 Mixin.submitButton 를 동시에 사용하고 싶을 때는 어떻게 될까요?

bigSubmitButton : Model -> Html msg
bigSubmitButton model =
    Html.button
        ( Mixin.bigButton :: Mixin.submitButton model.sending)
        []

조금 싫은 예감이 왔습니까?

그럼, 핑크색의 큰 송신 버튼을 만들려고 하면 어떻게 될까요?
핑크색의 버튼으로 하기 위한 Mixin 가 이하의 형태를 하고 있다고 합니다.

pinkButton : List (Attribute msg)

이렇게 될거야?

bigPinkSubmitButton : Model -> Html msg
bigPinkSubmitButton model =
    Html.button
        ( Mixin.bigButton :: Mixin.submitButton model.sending ++ Mixin.pinkButton)
        []

와우.

그럼 이번에는 model.broken 가 True 의 때만 class="broken" 를 붙여 버튼이 부서지도록 해 봅시다!

bigPinkHotSubmitButton : Model -> Html msg
bigPinkHotSubmitButton model =
    Html.button
        (Mixin.bigButton
            :: Mixin.submitButton model.sending
            ++ Mixin.pinkButton
            ++ (if model.broken then
                    [ Attributes.class "broken"
                    ]

                else
                    []
               )
        )
        []

우우 우우 우우 아 아 아 아 아 아! ! ! ! !
벌써 안돼 아 아 아 아 아 아! ! ! ! ! ! ! ! ! !
집으로 돌아갈 수 있습니다! ! ! ! ! ! ! ! ! ! !

추가 2019/8/11

최근에는 elm-mixin이라는 라이브러리를 만들었기 때문에 그쪽을 메인으로 사용하고 있습니다.

Attributes.batch로 해결

예를 들어 이것을 다음과 같이 쓸 수 있다면 어떨까요?

module Mixin exposing (..)

...
...

submitButton : Bool -> Attribute msg
submitButton sending =
    Attributes.batch
        [ Attributes.class "button"
        , Attributes.class "button_submit"
        , Attributes.disabled sending
        ]

pinkButton : Attribute msg
pinkButton =
    Attributes.batch
        [ ...
        , ...
        ]

module Main exposing (..)

...
...

bigPinkHotSubmitButton : Model -> Html msg
bigPinkHotSubmitButton model =
    Html.button
        [ Mixin.bigButton
        , Mixin.submitButton model.sending
        , Mixin.pinkButton
        , if model.broken then
            Attributes.class "broken"

          else
            Attributes.none
        ]
        []

엄청 가독성이 향상되지 않습니까?

이것을 실현하는데 있어서 포인트가 되고 있는 것이 다음의 2개의 함수입니다.

Html.Attributes.batch : List (Attribute msg) -> Attribute msg

Html.Attributes.none : Attribute msg

그냥 Cmd 라든지 Sub 라든지 Cmd.batch Cmd.none 와 비슷한 이미지군요!

arowM/html

글쎄, 편의성은 밝혀졌지만 불행히도 이러한 함수는 elm/html 또는 elm-community/html-extra에 포함되어 있지 않습니다.
이것들을 사용하려면 arowM/html로 갈아타야합니다.

자세한 것은 생략하지만, elm/html 이외에 다른 라이브러리를 읽어들이는 형태에서는 Html.Attributes.batch 와 같은 것은 실현할 수 없습니다.
따라서 arowM/html는 elm/html를 대체하는 전략을 취합니다.

물론 호환성은 유지하고 있기 때문에, 지금까지 써 온 elm/html 에 의존한 코드는 arowM/html 로 바꿔도 그대로 똑같이 움직입니다.
게다가 위의 batch 와 none 를 사용할 수 있게 됩니다.

arowM/html로 바꾸는 방법

elm/html 에 작별 인사하고 arowM/html로 대체하는 것은 매우 간단합니다.

elm.json 의 dependencies 에 있는 elm/html 를 arowM/html 로 바꾼다

elm-stuff 디렉토리 삭제

다시 컴파일

컴파일러가 "이 녀석들을 elm.json의 "indirect"에 추가해라"고 말해주기 때문에 지시에 따릅니다.

이것만으로 컴파일이 통과하게 되어, batch 이나 none 의 힘을 얻을 수 있습니다!

사쿠라 찬에게 밥을 준다.
사쿠라 짱 더보기
다른 기사 보기