Ember -Tutorial (Helper & custom Helper)

Helper

ember에는 helpler라는 개념이 있는데 이는 이전 글에서 action을 사용할 때 이용했던 on,fn 등이 이런 helper에 해당된다

그런데 한가지 다른게 보이는데 on을 사용할 때는{{}}안에서 사용했고 fn은 ()안에서 사용됐다
이는 최상위 수준에서의 도우미가 {{}}로 시작하기 때문이다.
{{helper1, (helper2 ... (helper3 ....))}} 가장 최상위는 {{}}로 시작하고 이후 중첩되는 도우미들은 ()로 둘러싼다.

Built-in Helper

ember에 내장된 도우미들 몇개만 살펴보자면

• {{on
• {{concat :여러 문자열을연결하는데 도움이 된다. `class={{concat "active-" @color}}
• {{get : 가져오는 것으로 {{get this.product "name"}}. 첫번째 인수는 해당 제품의 객체이고 2번째 인수는 그 객체의 키값이다. 객체의 키값으로 찾는 product.name과 동일하고 뒤에 오는 'name'은 동적으로도 가능하다
• {{hash : <Child @user ={{hash firstName="Lee" lastName="Moi"}}처럼 주어진 키와 값 쌍으로 해시를 생성하는 도우미이다. 이는 내부적으로 user = {firstName:'Lee', lastName:'Moi'}와 동일하다.
• {{let : {{let (concat this.firstName this.lastName) as |fullName|}} 처럼 사용하면 템플릿 내부에 임시 변수로서 사용할 수 있게 만드는 도우미로 concat도우미를 활용해 이름을 연결하여 LeeMoi라는 문자열을 fullName이라는 이름으로 사용할숭 있게 만드는 것이다.
• {{if : 프로그래밍에서 자주 보는 것으로 똑같다 if 조건절로 class={{if this.isRed 'red' 'black'}}이렇게 사용될 수 있다. 이는 this.isRed가 조건이며 red가 true일 때, black이 false일 때 출력되는 값이다.
• {{unless : class={{unless this.isRed 'black' 'red}} if와 반대로 조건이 거짓인 경우 첫번째를 반환하고 참일경우 2번째를 반환한다. 우리가 자주 사용한 !를 붙여 false가 true일때를 쓰는 방식. unless도 똑같이 else를사용할 수 있다(열린태그에서)
• {{each : React에서 가장 많이 사용했던 map이라고 생각하자 each를 통해 반복을 돌리고 하나씩 꺼내서 렌더링 하는데 도움을 준다
  아래 개방태그에서 마지막 예시를 확인해보자

등이 있고 개방태그에서 사용할 수 있는 예시를 하나씩 보면 이해하기 편하다.

주의할 점으로 요소의 attribute 영역에서 사용하는 것을 제외하고 열려있는 구역에서 사용할 시 #과 /을 통해 꼭 표시를 해줘야한다.

{{#let (concat this.firstName this.lastName) as |fullName|}}
  <h1>{{fullName}}</h1>
{{/let}}

{{#if this.isRed}}
  <h1>Red</h1>
{{/if}}

{#if this.isRed}}
  <h1>Red</h1>
{{else}}
  <h1>Black</h1>
{{/if}}

{#unless this.isRed}}
  <h1>Black</h1>
{{else}}
  <h1>Red</h1>
{{/unless}}

{{#each list as |item|
  <h1>{{item.name}}</h1>
  <h2>{{item.description}}</h2>
{{/each}}

 

여기서 each에 대한 설명을 조금만 더 붙이자면 each를 for와 동일하게 보며 list는 반복을 돌릴 객체이며 as |item|부분은 let을 사용한 부분처럼 반복을 돌면서 나올 하나하나의 item을 item이라는 변수명으로 사용하겠다는 얘기이다.
그리고 꼭 끝났다는 {{/each}}를 집어넣어 마무리 하자

custom helper

사용자 지정 도우미를 만들 수 있는데 이도 똑같이 emberCLI를 통해 만들 수 있다.
또 나오긴 하지만 React에서 custom hook과 같은 느낌이 처음에 강하게 든 개념이다

ember g helper currency

 

라고 저번에 만들었던 샵과 장바구니에서 가격을 나타내는 데 $가격으로 나타내고 싶은 것을 도우미로 만들어보려한다.
처음 CLI를 입력하면 currency.js라는 파일이 생성되는데 첫 내부를 살펴보면

import {helper} from '@ember/component/helper'

export default helper(function currency(params/*, hash*/) {
  return parmas
}

 

이렇게 생겼다.

여기서 helper라는 한수에 인자로 우리가 CLI로 만들때 만든 이름인 currency라는 함수를 만들어 넘긴다.
이때 첫번째 인수인 params는 도우미 블록에서 전달되는 매개변수 목록이다.
즉, {{currency 25}}를 작성할경우 params 배열 내부의 첫번째 매개변수로 들어오게 된다.
const [number] = params; 처럼 구조파괴 하여 사용가능하고 이를 통해 number에는 25라는 값이 담기게 된다.

그럼 주석 처리 되어 있는 hash부분은 2번째 매개변수로 무엇일까??

 

키가 정의되어 helper에게 값을 전달 할 수 있는 해시이다.

이또한 어떻게 사용하는지 바로 보자면 {{currency 25 sign="$"}} 처럼 사용할 수 있는데 이 또한 hash를 구조분해 할당하여

const {sign} = hash를 통해 안에 sign이라는 키값으로 보내진 값 $를 사용할 수 있게 된다!

뭐 기본값을 설정하거나 하는 등의 테크닉은 Javascript를 안다면 충분히 해볼 수 있다.
매개변수를 주지 않고 currency의 함수에서 =등을 사용해 기본값을 설정해서 사용한다면 고정적인 값들을 사용할 수 있게 된다.

 

근데 꼭 함수 기반으로 해야할까? 이는 함수형 프로그래밍인 Javascript이긴 하지만 ember는 class가 대부분이다
이curreny도 비슷하게 갈 수 있지 않을까??

class helper로 변경

import Helper from '@ember/component/helper'

export default class currency extends Helper {
  compute(params,hash) {
    //...some code
    return /*...some code*/
  }
}

 

내장되어 있는 compute 메서드를 사용하여 활용할 수 있다.