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 메서드를 사용하여 활용할 수 있다.
