fragment(attrs, children)

Description

라이프사이클 메서드를 프래그먼트 vnode에 연결할 수 있도록 합니다.

var groupVisible = true;
var log = function () {
  console.log('group is now visible');
};

m('ul', [
  m('li', 'child 1'),
  m('li', 'child 2'),
  groupVisible
    ? m.fragment({ oninit: log }, [
        // 두 개의 요소를 포함하는 프래그먼트
        m('li', 'child 3'),
        m('li', 'child 4'),
      ])
    : null,
]);

Signature

프래그먼트 vnode를 생성합니다.

vnode = m.fragment(attrs, children)

Argument	Type	Required	Description
attrs	Object	No	HTML 속성 또는 요소 프로퍼티
children	Array<Vnode>|String|Number|Boolean	No	자식 vnode. splat arguments 형태로 전달할 수 있습니다.
returns	Vnode		프래그먼트 vnode

How to read signatures

How it works

m.fragment()는 속성을 가진 프래그먼트 vnode를 생성합니다. 이는 key 또는 라이프사이클 메서드와 관련된 고급 사용 사례에 유용합니다.

프래그먼트 vnode는 DOM 요소의 목록을 나타냅니다. 단일 DOM 요소만 나타내고 키 관련 로직이 필요하지 않은 일반 요소 vnode를 사용하려면 m()을 사용해야 합니다.

일반적으로 노드 목록을 표현할 때는 간단한 배열이나 splat을 사용할 수 있습니다.

var groupVisible = true;

m(
  'ul',
  m('li', 'child 1'),
  m('li', 'child 2'),
  groupVisible
    ? [
        // 두 개의 요소를 포함하는 프래그먼트
        m('li', 'child 3'),
        m('li', 'child 4'),
      ]
    : null
);

하지만 JavaScript 배열에서는 키를 지정하거나 라이프사이클 메서드를 연결할 수 없습니다. 키 또는 라이프사이클 메서드를 사용하기 위해 래퍼 요소를 만들 수도 있지만, 복잡한 테이블 구조와 같이 추가 요소가 불필요할 수 있습니다. 이러한 경우 프래그먼트 vnode를 사용하면 됩니다.

vnode 객체 구조를 수동으로 작성하는 것보다 m.fragment를 사용하는 것이 몇 가지 이점이 있습니다. m.fragment는 동적으로 객체를 생성하는 방식보다 성능이 뛰어난 단형 객체를 생성합니다. 또한 m.fragment를 사용하면 다른 개발자에게 의도를 명확하게 전달할 수 있으며, vnode 객체 자체가 아닌 attrs 맵에 실수로 속성을 설정할 가능성을 줄일 수 있습니다.