mount(root, component)
Description
컴포넌트를 활성화하여 사용자 이벤트에 따라 자동으로 다시 그려지도록 합니다.
var state = {
count: 0,
inc: function () {
state.count++;
},
};
var Counter = {
view: function () {
return m('div', { onclick: state.inc }, state.count);
},
};
m.mount(document.body, Counter);컴포넌트를 마운트할 때 인자를 전달하려면 다음을 사용하십시오.
m.mount(element, {
view: function () {
return m(Component, attrs);
},
});Signature
m.mount(element, Component)
| Argument | Type | Required | Description |
|---|---|---|---|
element | Element | Yes | 서브트리의 부모 노드가 될 DOM 요소 |
Component | Component|null | Yes | 렌더링할 컴포넌트. null을 전달하면 트리를 언마운트하고 내부 상태를 정리합니다. |
| returns | 반환 값은 없습니다. |
How it works
m.mount(element, Component)는 호출되면 컴포넌트를 요소에 렌더링하고 (element, Component) 쌍을 다시 그리기 시스템에 등록합니다. 이 트리는 수동 또는 자동 다시 그리기가 발생할 때 다시 렌더링됩니다.
다시 그리기 시, 새로운 vDOM 트리는 이전 트리와 비교("diffed")되며, 기존 DOM 트리는 변경 사항을 반영해야 하는 경우에만 수정됩니다. 변경되지 않은 DOM 노드는 변경되지 않습니다.
Replace a component
mount(element, OtherComponent)를 호출하면 element가 현재 마운트 지점인 경우, 기존 컴포넌트는 OtherComponent로 대체됩니다.
Unmount
이전에 마운트된 컴포넌트가 있는 요소에서 m.mount(element, null)을 호출하면 컴포넌트가 언마운트되고 Mithril.js 내부 상태가 정리됩니다. 이 방법은 DOM에서 root 노드를 수동으로 제거할 때 메모리 누수를 방지하는 데 유용합니다.
Headless mounts
특정 고급 상황에서는 화면에 아무것도 렌더링하지 않고 다시 그리기를 구독하고 싶을 수 있습니다. 이는 라이브 DOM 트리에 추가되지 않은 요소에 m.mount를 호출하고, 마운트하는 컴포넌트에 필요한 로직을 배치하여 생성된 헤드리스 마운트를 통해 가능합니다. 컴포넌트는 view를 필요로 하지만, 유용한 값을 반환할 필요는 없으며 null 또는 undefined와 같은 값을 반환할 수 있습니다.
var elem = document.createElement('div');
// Subscribe
m.mount(elem, {
oncreate: function () {
// DOM에 추가된 후 실행
},
onupdate: function () {
// 다시 그리기마다 실행
},
onremove: function () {
// 필요한 정리 작업 수행
},
// 필수
view: function () {},
});
// Unsubscribe
m.mount(elem, null);여러 마운트 root에 대해 걱정할 필요가 없습니다. 여러 루트가 지원되며 서로 영향을 주지 않습니다. 다른 프레임워크와 통합할 때 컴포넌트에서 위 작업을 수행할 수도 있습니다.
Performance considerations
다시 그릴 때마다 vnode 트리를 생성하는 것이 비효율적으로 보일 수 있지만, JavaScript 데이터 구조를 생성하고 비교하는 것은 DOM을 조작하는 것보다 훨씬 효율적입니다.
DOM을 조작하는 것은 여러 이유로 비용이 많이 들 수 있습니다. 읽기와 쓰기를 번갈아 하면 여러 브라우저에서 불필요한 리페인트가 발생하여 성능에 악영향을 미칠 수 있지만, 가상 DOM 트리를 비교하면 쓰기를 단일 리페인트로 일괄 처리할 수 있습니다. 또한 다양한 DOM 작업의 성능 특성은 구현마다 다르며 모든 브라우저에 대해 학습하고 최적화하기 어려울 수 있습니다. 예를 들어 일부 구현에서는 childNodes.length를 읽는 시간 복잡도가 O(n)입니다. 일부에서는 parentNode를 읽으면 리페인트가 발생합니다.
반대로 JavaScript 데이터 구조를 순회하는 것은 훨씬 더 예측 가능하고 안정적인 성능을 제공하며, vnode 트리는 최신 JavaScript 엔진이 숨겨진 클래스와 같은 최적화를 적용하여 성능을 더욱 향상시킬 수 있도록 구현됩니다.
Differences from m.render
m.mount를 통해 렌더링된 컴포넌트는 뷰 이벤트, m.redraw() 호출 또는 m.request() 호출에 응답하여 자동으로 다시 그려집니다. m.render()를 통해 렌더링된 vnode는 그렇지 않습니다.
m.mount()는 라우팅이 다른 라이브러리나 프레임워크에 의해 처리되는 기존 코드베이스에 Mithril.js 위젯을 통합하려는 애플리케이션 개발자에게 적합하며, Mithril.js의 자동 다시 그리기 기능을 활용할 수 있도록 합니다.
m.render()는 타사 라우터에 연결하거나 Redux와 같은 타사 데이터 레이어 라이브러리를 사용하는 경우와 같이 렌더링을 수동으로 제어하려는 라이브러리 작성자에게 적합합니다.