redraw()

설명

애플리케이션 데이터 레이어에 변경 사항이 있을 때 DOM을 업데이트합니다.

Mithril.js 뷰에 정의된 이벤트 핸들러의 실행 컨텍스트 내에서 데이터가 수정되거나 m.request를 사용하여 요청이 완료된 후에는 별도로 호출할 필요가 없습니다. m.redraw()를 기반으로 구축된 자동 리드로우 시스템이 자동으로 처리합니다.

setTimeout/setInterval/requestAnimationFrame 콜백 또는 서드파티 라이브러리의 콜백에서는 명시적으로 호출해야 합니다.

서명

m.redraw()

인수	타입	필수	설명
반환			반환 값 없음

정적 멤버

m.redraw.sync

m.redraw.sync()

인수	타입	필수	설명
반환			반환 값 없음

작동 방식

Mithril.js 외부에서 콜백이 실행될 경우, Mithril.js 렌더링 엔진에 리드로우가 필요함을 알려야 합니다. 외부 콜백은 setTimeout/setInterval/requestAnimationFrame 콜백, 웹 소켓 라이브러리 콜백, jQuery 플러그인의 이벤트 핸들러, 타사 XHR 요청 콜백 등이 될 수 있습니다.

리드로우를 발생시키려면 m.redraw()를 호출합니다. m.redraw()는 m.mount 또는 m.route를 사용한 경우에만 작동합니다. m.render를 통해 렌더링한 경우에는 m.render를 사용하여 다시 그려야 합니다.

m.redraw()는 항상 비동기 리드로우를 트리거하는 반면, m.redraw.sync()는 동기 리드로우를 트리거합니다. m.redraw()는 window.requestAnimationFrame()에 연결되어 있으므로, 일반적으로 초당 최대 60회 실행됩니다. 모니터의 재생 빈도가 높으면 더 빠르게 실행될 수 있습니다.

m.redraw.sync()는 주로 iOS에서 비디오 재생이 정상적으로 작동하도록 하기 위한 것입니다. 이는 사용자 트리거 이벤트에 대한 응답으로만 작동합니다. 다음과 같은 몇 가지 주의 사항이 있습니다:

• 라이프사이클 메서드 또는 컴포넌트의 view() 메서드에서 m.redraw.sync()를 호출해서는 안 됩니다. 그렇게 하면 예측 불가능한 동작이 발생할 수 있습니다 (가능한 경우 오류가 발생합니다).
• 이벤트 핸들러에서 호출된 m.redraw.sync()는 이벤트 버블링 중에 DOM이 수정되도록 할 수 있습니다. 이전 DOM 트리와 새로운 DOM 트리의 구조에 따라 이벤트 버블링이 새로운 트리에서 완료되어 예상치 못한 핸들러가 실행될 수 있습니다.
• 스로틀링되지 않습니다. m.redraw.sync()를 한 번 호출하면 m.mount() 또는 m.route()로 등록된 각 루트마다 즉시 m.render() 호출이 한 번씩 발생합니다.

m.redraw()에는 이러한 문제가 없으므로 어디에서든 자유롭게 호출할 수 있습니다.