snabbdom

KO | EN

gitlite — search

#javascript #react #typescript #android #rust #deep-learning #macos #nodejs #windows #kubernetes #pytorch #security #openai #mcp

(★ 12,397)

단순성, 모듈화, 강력한 기능 및 성능에 초점을 맞춘 가상 DOM 라이브러리입니다.

파일 탐색기

최종 버전 다운로드 (.zip)

- - lint.yml
  - test.yml
- commit-msg
- pre-commit
- prepare-commit-msg
- settings.json
- - index.html
  - index.js
  - README.md
- - hero.js
  - index.html
  - index.js
- - index.html
  - index.js
- - index.html
  - index.js
- benchmarks.js
- index.html
- graphics.svg
- readme-title-light.svg
- readme-title.svg
- - attachto.ts
- - attributes.ts
  - class.ts
  - dataset.ts
  - eventlisteners.ts
  - module.ts
  - props.ts
  - style.ts
- h.ts
- hooks.ts
- htmldomapi.ts
- index.ts
- init.ts
- is.ts
- jsx.ts
- thunk.ts
- tovnode.ts
- vnode.ts
- - attachto.ts
  - attributes.ts
  - core.ts
  - dataset.ts
  - eventlisteners.ts
  - htmldomapi.ts
  - jsx.tsx
  - style.ts
  - thunk.ts
- tsconfig.json
.editorconfig
.gitignore
browserstack-browsers.js
CHANGELOG.md
CONTRIBUTING.md
eslint.config.mjs
LICENSE
package-lock.json
package.json
README-in_HN.md
README-zh_CN.md
README.md
serve.json
tsconfig.json
web-test-runner.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Snabbdom](resources/readme-title.svg)
단순함, 모듈성, 강력한 기능 및 성능에 중점을 둔 가상 DOM 라이브러리입니다.
---
[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
[![Build Status](https://github.com/snabbdom/snabbdom/actions/workflows/test.yml/badge.svg)](https://github.com/snabbdom/snabbdom/actions/workflows/test.yml)
[![npm version](https://badge.fury.io/js/snabbdom.svg)](https://badge.fury.io/js/snabbdom)
[![npm downloads](https://img.shields.io/npm/dm/snabbdom.svg)](https://www.npmjs.com/package/snabbdom)
[![Join the chat at https://gitter.im/snabbdom/snabbdom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/snabbdom/snabbdom?utm\_source=badge&utm\_medium=badge&utm\_campaign=pr-badge&utm\_content=badge)
[![Donate to our collective](https://opencollective.com/snabbdom/donate/button@2x.png?color=blue)](https://opencollective.com/snabbdom#section-contribute)
훌륭한 크로스 브라우저 테스트 도구에 대한 액세스를 제공해 준 [Browserstack](https://www.browserstack.com/)에 감사드립니다.
---
English | [简体中文](./README-zh\_CN.md) | [Hindi](./README-in\_HN.md)
## 소개 (Introduction)
가상 DOM은 훌륭합니다. 이를 통해 애플리케이션의 뷰를 상태의 함수로 표현할 수 있습니다. 하지만 기존의 솔루션들은 지나치게 비대하고, 너무 느리며, 기능이 부족하고, OOP 지향적인 API를 가지고 있거나, 혹은 제가 필요한 기능이 빠져 있었습니다.
Snabbdom은 단 ≈ 200 SLOC에 불과한 매우 단순하고 성능이 뛰어나며 확장 가능한 코어로 구성되어 있습니다. 커스텀 모듈을 통한 확장을 위해 풍부한 기능을 갖춘 모듈식 아키텍처를 제공합니다. 코어를 단순하게 유지하기 위해 본질적이지 않은 모든 기능은 모듈에 위임됩니다.
사용자는 Snabbdom을 원하는 대로 만들 수 있습니다! 원하는 기능을 선택하고 골라서 커스텀하세요. 또는 기본 확장 기능을 사용하여 고성능, 소형 크기, 그리고 아래 나열된 모든 기능을 갖춘 가상 DOM 라이브러리를 바로 사용할 수도 있습니다.
## 주요 기능 (Features)
- 코어 기능
- 약 200 SLOC – 전체 코드를 쉽게 읽고 작동 원리를 완벽하게 이해할 수 있습니다.
- 모듈을 통한 확장성.
- vnode별 및 모듈 전역 모두에서 diff 및 patch 프로세스의 모든 부분에 훅을 걸 수 있는 풍부한 훅 세트 제공.
- 뛰어난 성능. Snabbdom은 가장 빠른 가상 DOM 라이브러리 중 하나입니다.
- reduce/scan 함수와 동등한 함수 시그니처를 가진 패치(patch) 함수. FRP 라이브러리와 더 쉽게 통합할 수 있습니다.
- 모듈 기능
- 가상 DOM 노드를 쉽게 생성하기 위한 `h` 함수.
- [SVG \_just works\_ with the `h` helper](#svg).
- 복잡한 CSS 애니메이션을 수행하기 위한 기능.
- 강력한 이벤트 리스너 기능.
- diff 및 patch 프로세스를 더욱 최적화하기 위한 [Thunks](#thunks).
- [JSX 지원, TypeScript 타입 포함](#jsx)
- 서드파티 기능
- [snabbdom-to-html](https://github.com/acstll/snabbdom-to-html)에서 제공하는 서버 측 HTML 출력.
- [snabbdom-helpers](https://github.com/krainboltgreene/snabbdom-helpers)를 통한 간결한 가상 DOM 생성.
- [snabby](https://github.com/jamen/snabby)를 사용한 템플릿 문자열 지원.
- [snabbdom-looks-like](https://github.com/jvanbruegge/snabbdom-looks-like)를 이용한 가상 DOM 어설션
## 예제 (Example)
```mjs
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h
} from "snabbdom";
const patch = init([
// Init patch function with chosen modules
classModule, // makes it easy to toggle classes
propsModule, // for setting properties on DOM elements
styleModule, // handles styling on elements with support for animations
eventListenersModule // attaches event listeners
]);
const container = document.getElementById("container");
const vnode = h(
"div#container.two.classes",
{ on: { click: () => console.log("div clicked") } },
[
h("span", { style: { fontWeight: "bold" } }, "This is bold"),
" and this is just normal text",
h("a", { props: { href: "/foo" } }, "I'll take you places!")
]
);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(c

ontainer, vnode);
const newVnode = h(
"div#container.two.classes",
{ on: { click: () => console.log("updated div clicked") } },
[
h(
"span",
{ style: { fontWeight: "normal", fontStyle: "italic" } },
"This is now italic type"
),
" and this is still just normal text",
h("a", { props: { href: "/bar" } }, "I'll take you places!")
]
);
// 두 번째 `patch` 호출
patch(vnode, newVnode); // Snabbdom은 이전 뷰를새로운 상태로 효율적으로 업데이트합니다
```
## 추가 예제
- [요소의 애니메이션 재정렬](http://snabbdom.github.io/snabbdom/examples/reorder-animation/)
- [히어로 전환(Hero transitions)](http://snabbdom.github.io/snabbdom/examples/hero/)
- [SVG 캐러셀](http://snabbdom.github.io/snabbdom/examples/carousel-svg/)
---
## 목차
- [코어 문서](#core-documentation)
- [`init`](#init)
- [`patch`](#patch)
- [언마운팅](#unmounting)
- [`h`](#h)
- [`fragment`](#fragment-experimental) (실험적 기능)
- [`toVNode`](#tovnode)
- [훅](#hooks)
- [개요](#overview)
- [사용법](#usage)
- [`init` 훅](#the-init-hook)
- [`insert` 훅](#the-insert-hook)
- [`remove` 훅](#the-remove-hook)
- [`destroy` 훅](#the-destroy-hook)
- [모듈 만들기](#creating-modules)
- [모듈 문서](#modules-documentation)
- [class 모듈](#the-class-module)
- [props 모듈](#the-props-module)
- [attributes 모듈](#the-attributes-module)
- [dataset 모듈](#the-dataset-module)
- [style 모듈](#the-style-module)
- [커스텀 프로퍼티 (CSS 변수)](#custom-properties-css-variables)
- [지연된 프로퍼티](#delayed-properties)
- [`remove` 시 프로퍼티 설정](#set-properties-on-remove)
- [`destroy` 시 프로퍼티 설정](#set-properties-on-destroy)
- [eventlisteners 모듈](#the-eventlisteners-module)
- [SVG](#svg)
- [SVG 요소의 클래스](#classes-in-svg-elements)
- [썽크(Thunks)](#thunks)
- [JSX](#jsx)
- [TypeScript](#typescript)
- [Babel](#babel)
- [가상 노드 (Virtual Node)](#virtual-node)
- [sel : String](#sel--string)
- [data : Object](#data--object)
- [children : Array\](#children--arrayvnode)
- [text : string](#text--string)
- [elm : Element](#elm--element)
- [key : string | number](#key--string--number)
- [애플리케이션 구조화](#structuring-applications)
\* [관련 패키지](#related-packages)
- [일반적인 에러](#common-errors)
- [커뮤니티 피드백 기회](#opportunity-for-community-feedback)
## 코어 문서
Snabbdom의 코어는 가장 필수적인 기능만 제공합니다.
빠르고 확장 가능하면서도 가능한 한 단순하도록 설계되었습니다.
### `init`
코어는 단 하나의 함수인 `init`을 제공합니다. 이 `init`은
모듈 목록을 인자로 받아 지정된 모듈 집합을 사용하는 `patch` 함수를 반환합니다.
```mjs
import { classModule, styleModule } from "snabbdom";
const patch = init([classModule, styleModule]);
```
### `patch`
`init`이 반환하는 `patch` 함수는 두 개의 인자를 받습니다. 첫 번째 인자는
현재 뷰를 나타내는 DOM 요소 또는 vnode입니다. 두 번째 인자는
새롭고 업데이트된 뷰를 나타내는 vnode입니다.
부모가 있는 DOM 요소가 전달되면 `newVnode`가 DOM 노드로 변환되고, 전달된 요소는
생성된 DOM 노드로 교체됩니다. 이전 vnode가 전달되면 Snabbdom은
새로운 vnode의 설명에 맞게 이를 효율적으로 수정합니다.
전달되는 이전 vnode는 반드시 이전에 `patch`를 호출했을 때 반환된 vnode여야 합니다.
Snabbdom이 vnode 내부에 정보를 저장하기 때문에 이는 필수적입니다.
이를 통해 더 단순하고 성능이 뛰어난 아키텍처를 구현할 수 있으며,
새로운 이전 vnode 트리의 생성을 방지할 수 있습니다.
```mjs
patch(oldVnode, newVnode);
```
#### 언마운팅
마운트 지점 요소에서 VNode 트리를 제거하는 전용 API는 없지만, 이를 거의 달성할 수 있는 한 가지 방법은 다음과 같이 `patch`의 두 번째 인자로 주석 VNode를 제공하는 것입니다.
```mjs
patch(
oldVnode,
h("!", {
hooks: {
post: () => {
/\* patch 완료 \*/
}
}
})
);
```
물론 이 경우에도 마운트 지점에는 단일 주석 노드가 남아 있게 됩니다.
### `h`
권장사항

vnode를 생성하기 위해 `h`를 사용한다는 점입니다. 이 함수는 문자열인 [tag/selector](#sel--string), 선택적 데이터 객체, 그리고 선택적 문자열 또는 자식 배열을 인자로 받습니다.
```mjs
import { h } from "snabbdom";
const vnode = h("div#container", { style: { color: "#000" } }, [
h("h1.primary-title", "Headline"),
h("p", "A paragraph")
]);
```
### `fragment` (실험적 기능)
주의: 이 기능은 현재 실험적이며 선택적으로 사용해야 합니다. 
주요 버전의 변경 없이 API가 변경될 수 있습니다.
```mjs
const patch = init(modules, undefined, {
experimental: {
fragments: true
}
});
```
주어진 자식들을 포함하는 문서 조각(document fragment)으로 변환될 가상 노드를 생성합니다.
```mjs
import { fragment, h } from "snabbdom";
const vnode = fragment(["I am", h("span", [" a", " fragment"])]);
```
### `toVNode`
DOM 노드를 가상 노드로 변환합니다. 특히 기존에 존재하던 서버 사이드 렌더링된 HTML 콘텐츠를 패치(patch)할 때 유용합니다.
```mjs
import {
init,
styleModule,
attributesModule,
h,
toVNode
} from "snabbdom";
const patch = init([
// toVNode에서 사용하는 모듈로 `patch` 함수 초기화
attributesModule // DOM 노드의 어트리뷰트 처리
datasetModule, // DOM 노드의 `data-\*` 어트리뷰트 처리
]);
const newVNode = h("div", { style: { color: "#000" } }, [
h("h1", "Headline"),
h("p", "A paragraph"),
h("img", { attrs: { src: "sunrise.png", alt: "morning sunrise" } })
]);
patch(toVNode(document.querySelector(".container")), newVNode);
```
### 훅 (Hooks)
훅은 DOM 노드의 생명주기에 개입할 수 있는 방법입니다. Snabbdom은 다양하고 풍부한 훅을 제공합니다. 훅은 모듈이 Snabbdom을 확장하는 데 사용될 뿐만 아니라, 일반 코드에서도 가상 노드의 생명주기 중 원하는 시점에 임의의 코드를 실행하는 데 사용됩니다.
#### 개요
| 이름 | 트리거되는 시점 | 콜백에 전달되는 인자 |
| ----------- | -------------------------------------------------- | ----------------------- |
| `pre` | 패치 프로세스가 시작될 때 | 없음 |
| `init` | vnode가 추가되었을 때 | `vnode` |
| `create` | vnode를 기반으로 DOM 요소가 생성되었을 때 | `emptyVnode, vnode` |
| `insert` | 요소가 DOM에 삽입되었을 때 | `vnode` |
| `prepatch` | 요소가 패치되기 직전일 때 | `oldVnode, vnode` |
| `update` | 요소가 업데이트되는 중일 때 | `oldVnode, vnode` |
| `postpatch` | 요소가 패치된 직후일 때 | `oldVnode, vnode` |
| `destroy` | 요소가 직접 또는 간접적으로 제거될 때 | `vnode` |
| `remove` | 요소가 DOM에서 직접 제거될 때 | `vnode, removeCallback` |
| `post` | 패치 프로세스가 완료되었을 때 | 없음 |
모듈에서는 다음 훅들을 사용할 수 있습니다: `pre`, `create`, `update`, `destroy`, `remove`, `post`.
개별 요소의 `hook` 속성에서는 다음 훅들을 사용할 수 있습니다: `init`, `create`, `insert`, `prepatch`, `update`, `postpatch`, `destroy`, `remove`.
#### 사용법
훅을 사용하려면 데이터 객체 인자의 `hook` 필드에 객체 형태로 전달하면 됩니다.
```mjs
h("div.row", {
key: movie.rank,
hook: {
insert: (vnode) => {
movie.elmHeight = vnode.elm.offsetHeight;
}
}
});
```
#### `init` 훅
이 훅은 패치 프로세스 중에 새로운 가상 노드가 발견되었을 때 호출됩니다. 이 훅은 Snabbdom이 해당 노드를 처리하기 전에 호출됩니다. 즉, vnode를 기반으로 DOM 노드를 생성하기 전에 호출됩니다.
#### `insert` 훅
이 훅은 vnode에 해당하는 DOM 요소가 문서에 삽입되고 \_나서\_ 나머지 패치 주기가 모두 완료된 후에 호출됩니다.
즉, 삽입된 요소의 위치에 영향을 미칠 수 있는 요소가 이후에 변경되지 않을 것임을 확신하고, 이 훅 안에서 DOM 측정(예: [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 사용)을 안전하게 수행할 수 있습니다.
#### `remove` 훅
요소의 제거 과정에 개입할 수 있게 해줍니다. 이 훅은 vnode가 DOM에서 제거될 때 호출됩니다. 처리 함수는 vnode와 콜백을 모두 전달받습니다. 콜백을 사용하여 제거를 제어하고 지연시킬 수 있습니다. 콜백은 다음 시점에 호출되어야 합니다.

훅이 처리를 완료하며, 요소는 모든 `remove` 훅이 콜백을 호출한 뒤에만 제거됩니다.
이 훅은 요소가 부모로부터 제거될 때만 트리거되며, 제거되는 요소의 자식인 경우에는 트리거되지 않습니다. 이를 위해서는 `destroy` 훅을 참고하세요.

#### `destroy` 훅
이 훅은 DOM 요소가 DOM에서 제거되거나 부모가 DOM에서 제거될 때 가상 노드에서 호출됩니다.
이 훅과 `remove` 훅의 차이점을 이해하기 위해 예시를 살펴보겠습니다.

```mjs
const vnode1 = h("div", [h("div", [h("span", "Hello")])]);
const vnode2 = h("div", []);
patch(container, vnode1);
patch(vnode1, vnode2);
```

여기서 `destroy`는 내부 `div` 요소와 그 안에 포함된 `span` 요소 \_모두\_ 트리거됩니다. 반면 `remove`는 부모로부터 분리되는 유일한 요소이기 때문에 `div` 요소에서만 트리거됩니다.

예를 들어, `remove`를 사용하여 요소가 제거될 때 애니메이션을 트리거하고, `destroy` 훅을 사용하여 제거된 요소의 자식들이 사라지는 애니메이션을 추가로 실행할 수 있습니다.

### 모듈 만들기
모듈은 [hooks](#hooks)에 대한 전역 리스너를 등록하는 방식으로 작동합니다. 모듈은 단순히 훅 이름과 함수를 매핑하는 딕셔너리입니다.

```mjs
const myModule = {
create: (oldVnode, vnode) => {
// 새로운 가상 노드가 생성될 때마다 호출됨
},
update: (oldVnode, vnode) => {
// 가상 노드가 업데이트될 때마다 호출됨
}
};
```

이 메커니즘을 사용하면 Snabbdom의 동작을 쉽게 확장할 수 있습니다.
설명을 위해 기본 모듈의 구현을 살펴보세요.

## 모듈 문서
핵심 모듈에 대한 설명입니다. 모든 모듈은 선택사항입니다. JSX 예시는 이 라이브러리에서 제공하는 [`jsx` pragma](#jsx)를 사용한다고 가정합니다.

### 클래스(class) 모듈
클래스 모듈은 요소의 클래스를 동적으로 쉽게 토글할 수 있는 방법을 제공합니다. `class` 데이터 속성에서 객체를 기대합니다. 이 객체는 클래스 이름을 vnode에 클래스를 유지할지 여부를 나타내는 부울 값에 매핑해야 합니다.

```mjs
h("a", { class: { active: true, selected: false } }, "Toggle");
```

JSX에서는 다음과 같이 `class`를 사용할 수 있습니다:

```jsx// Renders as:```

### 속성(props) 모듈
DOM 요소에 프로퍼티를 설정할 수 있게 해줍니다.

```mjs
h("a", { props: { href: "/foo" } }, "Go to Foo");
```

JSX에서는 다음과 같이 `props`를 사용할 수 있습니다:

```jsx
// Renders as:  with input.name === "foo"
```

프로퍼티는 설정만 가능하고 제거할 수는 없습니다. 브라우저가 사용자 정의 프로퍼티의 추가 및 삭제를 허용하더라도, 이 모듈은 삭제를 시도하지 않습니다.
이는 네이티브 DOM 프로퍼티를 제거할 수 없기 때문에 당연한 것입니다. 그리고 DOM에 값을 저장하거나 객체를 참조하기 위해 사용자 정의 프로퍼티를 사용하고 있다면, 대신 [data-\\* 속성](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use\_data\_attributes) 사용을 고려해 보세요. 아마도 [dataset 모듈](#the-dataset-module)을 통해서 말이죠.

### 속성(attributes) 모듈
props와 같지만, DOM 요소에 프로퍼티 대신 속성(attribute)을 설정합니다.

```mjs
h("a", { attrs: { href: "/foo" } }, "Go to Foo");
```

JSX에서는 다음과 같이 `attrs`를 사용할 수 있습니다:

```jsx// Renders as:```

속성은 `setAttribute`를 사용하여 추가 및 업데이트됩니다. 이전에 추가/설정되었으나 `attrs` 객체에 더 이상 존재하지 않는 속성의 경우, `removeAttribute`를 사용하여 DOM 요소의 속성 목록에서 제거됩니다.

부울 속성(예: `disabled`, `hidden`, `selected` 등)의 경우, 의미는 속성 값(`true` 또는 `false`)에 의존하지 않고 DOM 요소 자체에 속성이 존재하는지 여부에 의존합니다. 이러한 속성은 모듈에 의해 다르게 처리됩니다: 부울 속성이 [falsy 값](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Boolean)(`0`, `-0`, `null`, `false`, `NaN`, `undefined`, 또는 빈 문자열(`""`))로 설정된 경우, 해당 속성은 DOM 요소의 속성 목록에서 제거됩니다.

### 데이터셋(dataset) 모듈
다음을 허용합니다

DOM 요소에 커스텀 데이터 속성(`data-\*`)을 설정할 수 있습니다. 이 속성들은 [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) 프로퍼티를 통해 접근할 수 있습니다.
```mjs
h("button", { dataset: { action: "reset" } }, "Reset");
```
JSX에서는 다음과 같이 `dataset`을 사용할 수 있습니다:
```jsx// Renders as:```
### style 모듈
style 모듈은 HTML을 세련되게 보이게 하고 부드럽게 애니메이션을 적용하기 위한 것입니다. 핵심적으로 요소에 CSS 프로퍼티를 설정할 수 있게 해줍니다.
```mjs
h(
"span",
{
style: {
border: "1px solid #bada55",
color: "#c0ffee",
fontWeight: "bold"
}
},
"Say my name, and every colour illuminates"
);
```
JSX에서는 다음과 같이 `style`을 사용할 수 있습니다:
```jsx// Renders as:```
#### 커스텀 프로퍼티 (CSS 변수)
CSS 커스텀 프로퍼티(일명 CSS 변수)가 지원되며, `--` 접두사를 붙여야 합니다.
```mjs
h(
"div",
{
style: { "--warnColor": "yellow" }
},
"Warning"
);
```
#### 지연된 프로퍼티
프로퍼티가 지연되도록 지정할 수 있습니다. 이 프로퍼티들이 변경되면, 다음 프레임이 지난 후에야 변경 사항이 적용됩니다.
```mjs
h(
"span",
{
style: {
opacity: "0",
transition: "opacity 1s",
delayed: { opacity: "1" }
}
},
"Imma fade right in!"
);
```
이를 통해 요소의 등장을 선언적으로 쉽게 애니메이션할 수 있습니다.
`transition-property`의 `all` 값은 지원되지 않습니다.
#### `remove` 시 프로퍼티 설정
`remove` 프로퍼티에 설정된 스타일은 요소가 DOM에서 제거되려고 할 때 적용됩니다. 적용된 스타일은 CSS 트랜지션을 통해 애니메이션되어야 합니다. 모든 스타일의 애니메이션이 완료되어야만 요소가 DOM에서 제거됩니다.
```mjs
h(
"span",
{
style: {
opacity: "1",
transition: "opacity 1s",
remove: { opacity: "0" }
}
},
"It's better to fade out than to burn away"
);
```
이를 통해 요소의 제거를 선언적으로 쉽게 애니메이션할 수 있습니다.
`transition-property`의 `all` 값은 지원되지 않습니다.
#### `destroy` 시 프로퍼티 설정
```mjs
h(
"span",
{
style: {
opacity: "1",
transition: "opacity 1s",
destroy: { opacity: "0" }
}
},
"It's better to fade out than to burn away"
);
```
`transition-property`의 `all` 값은 지원되지 않습니다.
### eventlisteners 모듈
event listeners 모듈은 이벤트 리스너를 부착하기 위한 강력한 기능을 제공합니다.
리스닝하려는 이벤트 이름에 해당하는 프로퍼티를 가진 `on` 객체를 제공함으로써 vnode의 이벤트에 함수를 부착할 수 있습니다. 이 함수는 이벤트가 발생할 때 호출되며, 해당 이벤트 객체가 인자로 전달됩니다.
```mjs
function clickHandler(ev) {
console.log("got clicked");
}
h("div", { on: { click: clickHandler } });
```
JSX에서는 다음과 같이 `on`을 사용할 수 있습니다:
```js```
Snabbdom은 렌더링 간에 이벤트 핸들러를 교체할 수 있습니다. 이는 DOM에 부착된 이벤트 핸들러를 실제로 건드리지 않고 이루어집니다.
단, 이 모듈이 DOM에 이벤트 핸들러를 다시 바인딩하는 것을 피하기 위해 사용하는 기술 때문에 \*\*vnode 간에 이벤트 핸들러를 공유할 때는 주의해야 합니다\*\* (그리고 일반적으로 모듈이 주어진 데이터를 변경할 수 있기 때문에 vnode 간에 데이터를 공유하는 것은 작동이 보장되지 않습니다).
특히 다음과 같은 코드를 작성해서는 \*\*안 됩니다\*\*:
```mjs
// 작동하지 않음
const sharedHandler = {
change: (e) => {
console.log("you chose: " + e.target.value);
}
};
h("div", [
h("input", {
props: { type: "radio", name: "test", value: "0" },
on: sharedHandler
}),
h("input", {
props: { type: "radio", name: "test", value: "1" },
on: sharedHandler
}),
h("input", {
props: { type: "radio", name: "test", value: "2" },
on: sharedHandler
})
]);
```
이러한 많은 경우, 대신 배열 기반 핸들러를 사용할 수 있습니다(위에서 설명함).
대안으로, 단순히 각 노드에 고유한 `on` 값이 전달되도록 하세요:
```mjs
// 작동함
const sharedHandler = (e) => {
console.log("you chose: " + e.target.value);
};
h("div", [
h("input", {
props: { type: "radio", name: "test", value: "0" },
on: { change: sharedHandler }
}),
h("input", {
props: { type: "radio", name: "test", value: "1" },
on: { change:

sharedHandler }
}),
h("input", {
props: { type: "radio", name: "test", value: "2" },
on: { change: sharedHandler }
})
]);
```
## SVG
가상 노드를 생성하기 위해 `h` 함수를 사용할 때 SVG는 문제없이 작동합니다. SVG 요소는 적절한 네임스페이스와 함께 자동으로 생성됩니다.
```mjs
const vnode = h("div", [
h("svg", { attrs: { width: 100, height: 100 } }, [
h("circle", {
attrs: {
cx: 50,
cy: 50,
r: 40,
stroke: "green",
"stroke-width": 4,
fill: "yellow"
}
})
])
]);
```
[SVG 예제](./examples/svg) 및 [SVG 캐러셀 예제](./examples/carousel-svg/)를 참고하세요.
### SVG 요소의 클래스
일부 브라우저(IE <=11 등)는 [SVG 요소에서 `classList` 속성을 지원하지 않습니다](http://caniuse.com/#feat=classlist).
\_class\_ 모듈은 내부적으로 `classList`를 사용하므로, [classList polyfill](https://www.npmjs.com/package/classlist-polyfill)을 사용하지 않는 한 이 경우에 작동하지 않습니다.
(폴리필을 사용하고 싶지 않다면, \_attributes\_ 모듈과 함께 `class` 속성을 사용할 수 있습니다).
## 썬크 (Thunks)
`thunk` 함수는 셀렉터, 썬크를 식별하기 위한 키, vnode를 반환하는 함수, 그리고 가변적인 개수의 상태 인자들을 받습니다. 호출되면 렌더 함수가 상태 인자들을 받게 됩니다.
`thunk(selector, key, renderFn, [stateArguments])`
`renderFn`은 `renderFn`이 변경되었거나 `[stateArguments]` 배열의 길이 또는 그 요소들이 변경된 경우에만 호출됩니다.
`key`는 선택 사항입니다. 셀렉터가 썬크의 형제 요소들 사이에서 고유하지 않을 때 제공해야 합니다. 이를 통해 diff 과정에서 썬크가 항상 올바르게 매칭되도록 보장합니다.
썬크는 불변 데이터(immutable data)를 다룰 때 사용할 수 있는 최적화 전략입니다.
숫자를 기반으로 가상 노드를 생성하는 간단한 함수를 생각해 봅시다.
```mjs
function numberView(n) {
return h("div", "Number is: " + n);
}
```
뷰는 오직 `n`에만 의존합니다. 즉, `n`이 변경되지 않았다면 가상 DOM 노드를 생성하고 이전 vnode와 패치(patch)하는 것은 낭비입니다. 이러한 오버헤드를 피하기 위해 `thunk` 헬퍼 함수를 사용할 수 있습니다.
```mjs
function render(state) {
return thunk("num", numberView, [state.number]);
}
```
실제로 `numberView` 함수를 호출하는 대신, 가상 트리에 더미 vnode만 배치하게 됩니다. Snabbdom이 이 더미 vnode를 이전 vnode와 패치할 때, `n`의 값을 비교합니다. `n`이 변경되지 않았다면 단순히 이전 vnode를 재사용합니다. 이를 통해 숫자 뷰의 재생성과 diff 과정 전체를 건너뛸 수 있습니다.
여기서 뷰 함수는 단지 예시일 뿐입니다. 실제로 썬크는 생성하는 데 상당한 연산 시간이 소모되는 복잡한 뷰를 렌더링할 때만 유용합니다.
## JSX
JSX 프래그먼트는 여전히 실험적 단계이며 옵트인(opt-in)해야 한다는 점에 유의하세요.
자세한 내용은 [`fragment`](#fragment-experimental) 섹션을 참조하세요.
### TypeScript
`tsconfig.json`에 다음 옵션들을 추가하세요:
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "Fragment"
}
}
```
그런 다음 파일 확장자로 `.tsx`를 사용하고 있는지 확인하고, 파일 상단에 `jsx` 함수와 `Fragment` 함수를 임포트하세요:
```tsx
import { Fragment, jsx, VNode } from "snabbdom";
const node: VNode = (

I was created with JSX

);
const fragment: VNode = (
<>
JSX fragments
are experimentally supported
);
```
### Babel
babel 설정에 다음 옵션을 추가하세요:
```json
{
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "jsx",
"pragmaFrag": "Fragment"
}
]
]
}
```
그런 다음 파일 상단에 `jsx` 함수와 `Fragment` 함수를 임포트합니다:
```jsx
import { Fragment, jsx } from "snabbdom";
const node = (

I was created with JSX

);
const fragment = (
<>
JSX fragments
은 실험적으로 지원됩니다.
);
```
## Virtual Node
\*\*Properties\*\*
- [sel](#sel--string)
- [data](#data--object)
- [children](#children--arrayvnode)
- [text](#text--string)
- [elm](#elm--element)
- [key](#key--string--number)
### sel : string
`sel` 속성은 vnode의 HTML 요소를 지정하며, 선택적으로 앞에 `#`이 붙는 `id`와 각각 앞에 `.`이 붙는 0개 이상의 클래스를 가질 수 있습니다. 이 문법은 CSS 선택기에서 영감을 받았습니다. 몇 가지 예시는 다음과 같습니다:
- `div#container.bar.baz` – `id`가 `container`이고 클래스가 `bar` 및 `baz`인 `div` 요소입니다.
- `li` – `id`와 클래스가 없는 `li` 요소입니다.
- `button.alert.primary` – `alert`와 `primary` 두 개의 클래스를 가진 `button` 요소입니다.
선택기는 \_정적\_(static)이어야 합니다. 즉, 요소의 수명 주기 동안 변경되어서는 안 됩니다. 동적 `id`를 설정하려면 [props 모듈](#the-props-module)을 사용하고, 동적 클래스를 설정하려면 [class 모듈](#the-class-module)을 사용하세요.
선택기가 정적이기 때문에 Snabbdom은 이를 vnode 식별의 일부로 사용합니다. 예를 들어, 두 자식 vnode인
```mjs
[h("div#container.padding", children1), h("div.padding", children2)];
```
가 다음으로 패치되면
```ts
[h("div#container.padding", children2), h("div.padding", children1)];
```
Snabbdom은 새로운 DOM 요소를 생성하는 대신 선택기를 사용하여 vnode를 식별하고 DOM 트리에서 순서를 재정렬합니다. 이러한 선택기 사용 덕분에 많은 경우에 key를 지정할 필요가 없어집니다.
### data : Object
가상 노드의 `.data` 속성은 [모듈](#modules-documentation)이 생성된 실제 DOM 요소에 접근하고 조작하기 위한 정보를 추가하는 곳입니다. 스타일, CSS 클래스, 속성(attribute) 등을 추가할 수 있습니다.
data 객체는 [`h()`](#h)의 (선택적) 두 번째 매개변수입니다.
예를 들어 `h('div', {props: {className: 'container'}}, [...])`는 다음을 생성합니다:
```mjs
({
props: {
className: "container"
}
});
```
이 객체가 바로 `.data` 객체입니다.
### children : Array\
가상 노드의 `.children` 속성은 생성 시 [`h()`](#h)의 세 번째 (선택적) 매개변수입니다. `.children`은 생성 시 부모 DOM 노드의 자식으로 추가되어야 하는 가상 노드들의 배열(Array)일 뿐입니다.
예를 들어 `h('div', {}, [ h('h1', {}, 'Hello, World') ])`는 다음을 생성합니다:
```mjs
[
{
sel: "h1",
data: {},
children: undefined,
text: "Hello, World",
elm: Element,
key: undefined
}
];
```
이 객체가 바로 `.children` 속성입니다.
### text : string
`.text` 속성은 텍스트를 가지는 단 하나의 자식만을 가지고 오직 `document.createTextNode()`만 사용하면 되는 경우에 가상 노드가 생성될 때 만들어집니다.
예를 들어: `h('h1', {}, 'Hello')`는 `Hello`를 `.text` 속성으로 갖는 가상 노드를 생성합니다.
### elm : Element
가상 노드의 `.elm` 속성은 Snabbdom에 의해 생성된 실제 DOM 노드를 가리키는 포인터입니다. 이 속성은 [훅(hooks)](#hooks)뿐만 아니라 [모듈](#modules-documentation)에서 계산을 수행할 때 매우 유용합니다.
### key : string | number
`.key` 속성은 [`.data`](#data--object) 객체 내부에 key가 제공될 때 생성됩니다. `.key` 속성은 불필요하게 DOM 노드를 다시 생성하는 것을 피하기 위해 이전에 존재했던 DOM 노드에 대한 포인터를 유지하는 데 사용됩니다. 이는 목록 재정렬과 같은 작업에 매우 유용합니다. key는 객체 내부의 키/값 쌍으로 내부적으로 저장되므로 올바른 조회를 허용하기 위해 문자열(string) 또는 숫자(number)여야 하며, 여기서 `.key`가 키이고 생성된 [`.elm`](#elm--element) 속성이 값이 됩니다.
제공되는 경우, `.key` 속성은 형제 요소들 중에서 고유해야 합니다.
예를 들어: `h('div', {key: 1}, [])`는 값으로 `1`을 갖는 `.key` 속성을 가진 가상 노드 객체를 생성합니다.
## 애플리케이션 구조화 (Structuring applications)
Snabbdom은 로우 레벨(low-level) 가상 DOM 라이브러리입니다. 애플리케이션을 구조화하는 방법에 대해 강제하는 방식이 없습니다(unopinionated).
다음은 Snabbdom으로 애플리케이션을 구축하는 몇 가지 접근 방식입니다.
- [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) –
포함하고 있는 저장소

Snabbdom을 사용하는 아키텍처를 보여주는 몇 가지 예제 애플리케이션입니다.
- [Cycle.js](https://cycle.js.org/) –
"더 깨끗한 코드를 위한 함수형 반응형 JavaScript 프레임워크"
Snabbdom 사용
- [Vue.js](http://vuejs.org/)는 snabbdom의 포크(fork)를 사용합니다.
- [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/)는 snabbdom 바인딩 위에 redux 유사 아키텍처를 구축합니다.
- [kaiju](https://github.com/AlexGalays/kaiju) -
snabbdom 위의 상태 저장 컴포넌트 및 옵저버블
- [Tweed](https://tweedjs.github.io) –
반응형 인터페이스에 대한 객체지향적 접근 방식.
- [Cyclow](http://cyclow.js.org) -
"JavaScript용 반응형 프론트엔드 프레임워크"
Snabbdom 사용
- [Tung](https://github.com/Reon90/tung) –
HTML 렌더링을 위한 JavaScript 라이브러리. Tung은 HTML과 JavaScript 개발을 분리하는 데 도움을 줍니다.
- [sprotty](https://github.com/theia-ide/sprotty) - "웹 기반 다이어그램 프레임워크" Snabbdom 사용.
- [Mark Text](https://github.com/marktext/marktext) - "실시간 미리보기 Markdown 편집기" Snabbdom 기반 구축.
- [puddles](https://github.com/flintinatux/puddles) -
"초소형 vdom 앱 프레임워크. 순수 Redux. 보일러플레이트 없음." - Snabbdom으로 :heart:를 담아 제작됨.
- [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - Snabbdom을 통한 VirtualDOM 기능을 갖춘 [Backbone](http://backbonejs.org/) 뷰.
- [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - 상태 머신과 Snabbdom을 사용하여 사용자 인터페이스 구축하기.
- [Pureact](https://github.com/irony/pureact) - "단 하나의 의존성(Snabbdom)만으로 Redux와 훅을 포함한 React를 65줄로 구현"
- [Snabberb](https://github.com/tobymao/snabberb) - 반응형 뷰를 구축하기 위해 [Opal](https://github.com/opal/opal)과 Snabbdom을 사용하는 미니멀한 Ruby 프레임워크.
- [WebCell](https://github.com/EasyWebApp/WebCell) - JSX & TypeScript 기반의 Web Components 엔진
Snabbdom을 사용하여 다른 방식으로 애플리케이션을 구축하고 있다면 꼭 공유해 주세요.

## 관련 패키지
snabbdom과 관련된 패키지는 `snabbdom` 키워드로 태그를 지정하여 npm에 배포해야 합니다.
[쿼리 문자열 `keywords:snabbdom`을 사용하여 찾을 수 있습니다](https://www.npmjs.com/search?q=keywords:snabbdom).

## 일반적인 오류
```text
Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.
```
이 오류의 원인은 패치 간 vnode 재사용 때문입니다(코드 예제 참조). snabbdom은 성능 향상을 위해 전달된 가상돔 노드 내부에 실제 DOM 노드를 저장하므로, 패치 간 노드 재사용은 지원되지 않습니다.
```mjs
const sharedNode = h("div", {}, "Selected");
const vnode1 = h("div", [
h("div", {}, ["One"]),
h("div", {}, ["Two"]),
h("div", {}, [sharedNode])
]);
const vnode2 = h("div", [
h("div", {}, ["One"]),
h("div", {}, [sharedNode]),
h("div", {}, ["Three"])
]);
patch(container, vnode1);
patch(vnode1, vnode2);
```
객체의 얕은 복사본을 생성하여 이 문제를 해결할 수 있습니다(여기서는 객체 스프레드 구문 사용):
```mjs
const vnode2 = h("div", [
h("div", {}, ["One"]),
h("div", {}, [{ ...sharedNode }]),
h("div", {}, ["Three"])
]);
```
또 다른 해결책은 공유 vnode를 팩토리 함수로 감싸는 것입니다:
```mjs
const sharedNode = () => h("div", {}, "Selected");
const vnode1 = h("div", [
h("div", {}, ["One"]),
h("div", {}, ["Two"]),
h("div", {}, [sharedNode()])
]);
```

## 커뮤니티 피드백 기회
커뮤니티에서 피드백을 제공할 만한 풀 리퀘스트는 며칠 동안의 이러한 기회를 제공한 후에 병합되어야 합니다.

snabbdom

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

snabbdom

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README