이것은 Create Your Own Vue.js From Scratch라는 시리즈의 두 번째 부분으로, Vue.js와 같은 반응형 프레임워크의 기초를 만드는 방법을 가르쳐 드립니다. 에서 우리에게 필요한 부분과 따라야 할 로드맵을 설명했습니다. 아직 읽지 않으셨다면 이 글을 읽기 전에 읽어보시길 권합니다.

저는 Vue.js로 작업한 1년의 전문적인 경험이 있지만 Evan You이 직접 제공한 8시간 과정에 참석했습니다(Vue.js Amsterdam의 일환으로 Vue.js가 내부에서 어떻게 작동하는지 배우고 "마술"비하인드 스토리가 작동합니다. 이 블로그 시리즈는 제가 그 환상적인 워크샵에서 배운 것을 포괄적인 방식으로 관심 있는 모든 사람들에게 가르치기 위한 것입니다.

로드맵 🚘

가상 DOM 기본 사항(이 게시물)

가상 DOM이란 무엇입니까?

💡 DOM = Document Object Model, 웹사이트의 HTML 구조 💡 VDOM = 해당 구조의 대표 사본

가상 DOM은 실제 DOM을 JavaScript 형식으로 표현한 것으로, 무언가가 변경될 때마다 실제 DOM을 조작하는 것보다 조작하는 것이 더 쉽고 저렴합니다.

또한 DOM을 브라우저에 렌더링하지 않고 문자열로 렌더링하려는 경우에도 유용합니다(서버 측 렌더링에 유용함).

가상 노드

따라서 가상 DOM은 가상 노드로 구성되며, 이 예제에서 코딩할 예는 다음과 같습니다.

{
    tag: 'div',
    props: {
        class: 'container'
    },
    children: [
        {
            tag: 'h1',
            props: {},
            children: 'Hello World'
        },
        {
            tag: 'p',
            props: {},
            children: 'Lorem ipsum dolor sit amet.'
        }
    ]
}

위의 예는 다음 HTML 코드와 동일합니다.

<div class="container">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

따라서 모든 가상 노드는 다음으로 구성됩니다.

HTML 태그를 문자열로 사용

속성의 개체

다음 중 하나일 수 있는 자식 목록:

다른 노드

A 텍스트(내용을 나타냄)

가상 DOM 스켈레톤

이 예에서는 본격적인 가상 DOM "엔진"을 구축하지 않지만 기본 사항을 이해하기에 충분합니다.

가상 DOM의 코딩을 살펴보자. 우리는 다음 라인을 기반으로 미래의 모든 코드를 작성할 것입니다. 따라서 다음 내용으로 HTML 파일을 만듭니다.

<div id="app"></app>
<script>

    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
    }

    // Mount a virtual node to the DOM
    function mount(vnode, container) {
        // Create the element
        // Set props
        // Handle children
        // Mount to the DOM
    }

    // Unmount a virtual node from the DOM
    function unmount(vnode) {
        // Unmount the virtual node
    }

    // Take 2 vnodes, compare & figure out what's the difference
    function patch(n1, n2) {
        // Case where the nodes are of the same tag
        // Case where the new vnode has string children
        // Case where the new vnode has an array of vnodes
        // Case where the nodes are of different tags
    }

    function render(message) {
        // Render a virtual node with a given message
    }

    // Create virtual nodes & render them below this line...
</script>

보시다시피 가상 DOM을 만들고 렌더링하는 역할을 하는 5가지 다른 기능이 있습니다.

h 가상 노드를 생성합니다(하지만 실제 DOM에 아직 마운트하지 않음). 나는 이것을 h이라고 불렀다. 왜냐하면 그것이 Vue.js 프로젝트에서도

이라고 불리는 방식이기 때문이다.

mount은 주어진 가상 노드를 가져와 실제 DOM의 주어진 컨테이너에 마운트합니다. 첫 번째 요소의 경우 파일 맨 위에 생성한 #app 노드가 됩니다.

unmount은 부모 노드에서 가상 노드를 제거합니다

patch은 지금까지 우리가 VDOM에 대해 작성할 가장 큰 기능입니다. 이것은 두 개의 다른 노드를 비교하고 모든 차이점을 재귀적 방식으로 확인해야 하기 때문입니다(모든 자식에 대해 재귀적으로 수행).

render은 렌더링 기능의 단순화된 버전입니다. 이 예에서는 내부에 주어진 메시지가 포함된 다양한 가상 노드를 생성합니다(나중에 VDOM "엔진"작동을 보여주기 위해 변경합니다.

).

다음은 무엇입니까 ⚡️

1부에서는 Vue.js와 유사한 자체 프레임워크를 구축하는 데 필요한 구축 부분을 살펴보았고 이 부분에서는 가상 돔을 구축하는 방법의 기본 사항을 살펴보았습니다.

다음 장에서는 완전한 가상 DOM 부분을 실제로 구현합니다.

계속 지켜봐 주세요 😉

내 콘텐츠와 업데이트가 마음에 들면 Twitter에서 나를 팔로우하는 것이 가장 좋습니다. 내가 보통 손잡이 아래에서 놀고있는 곳입니다.

Unplash의 Joshua Earle 원본 표지 사진, Marc Backes 편집.