m.render vs m.mount
미스릴은 virtual dom node를 생성하고, 이 가상 노드를 문서내의 특정 요소에 렌더링하거나 마운트한다. 가상 노드를 생성하는 컴포넌트를 작성하고, 해당 컴포넌트의 내용을 화면에 표시하기 위해서는 이미 존재하는 HTML 문서 내의 특정 DOM의 내부를 가상 노드로 채워주게 된다. 이 때 사용하는 함수로 m.render() 와 m.mount()가 있다. m.render()는 1회성으로 가상 노드를 렌더링하며, m.mount()는 특정 DOM에 가상 노드 컴포넌트를 마운트하는데, mithril은 마운트된 DOM 내에서 발생하는 이벤트를 체크하여 내부적으로 m.render()를 다시 호출해서 이벤트에 의해서 변경된 데이터가 UI에 반영될 수 있도록 자동으로 다시 그리기를 수행한다.
다음 코드에서 links는 두 개의 링크 정보(연결주소와 타이틀)를 담은 객체 배열인데, 이 정보를 리스트로 렌더링하는 예를 보여준다. (이들 데이터가 고정적이라고 한다면 마운트하는 것보다 m.render()를 써서 그리기만 하는 것이 훨씬 가벼울 것이다.)
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LeBrJy” default_tab=”js,result” user=”stripe-q”]See the Pen <a href=’https://codepen.io/stripe-q/pen/LeBrJy/’>simply render lists.</a> by Stripe_Q (<a href=’https://codepen.io/stripe-q’>@stripe-q</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
하지만 실질적으로 m.render()는 2회 이상 호출이 가능하다. m.redner()는 미스릴의 UI 렌더링 기능을 모두 포함하고 있고, 마운트 되지 않은 가상노드라하더라도 이미 그려진 상태와 그릴 상태를 비교해서 지능적으로 다시 그리기 성능을 극대화한다.
관련 글 목차