censor(object, extra)

Description

라이프사이클 속성 및 지정된 사용자 정의 속성이 제거된 얕은 복사본 객체를 반환합니다.

var attrs = { one: 'two', enabled: false, oninit: function () {} };
var censored = m.censor(attrs, ['enabled']);
// {one: "two"}

Signature

censored = m.censor(object, extra)

인수	유형	필수	설명
object	Object	예	속성을 제거할 객체. 키-값 쌍의 맵입니다.
extra	Array<String>	아니요	제거할 추가 속성 이름의 배열.
반환값	Object		속성이 제거된 얕은 복사본 객체. 제거할 속성이 없으면 원래 객체를 반환합니다.

서명 읽는 방법

How it works

일반적으로 이 메서드는 직접 사용할 필요가 없으며, 필요한 속성만 명시하는 것이 좋습니다. 하지만 때로는 알 수 없는 모든 속성을 다른 요소로 전달해야 하는 경우가 있습니다. 이는 편리할 수 있지만, 라이프사이클 메서드가 의도치 않게 여러 번 호출되는 문제가 발생할 수 있습니다.

function SomePage() {
  return {
    view: function () {
      return m(SomeFancyView, {
        oncreate: function () {
          sendViewHit(m.route.get(), 'some fancy view');
        },
      });
    },
  };
}

function SomeFancyView() {
  return {
    view: function (vnode) {
      return m('div', vnode.attrs, [
        // !!!
        // ...
      ]);
    },
  };
}

위 코드는 문제가 없어 보이지만, SomePage 뷰가 렌더링될 때마다 oncreate가 두 번 호출되어 두 번의 히트가 전송됩니다. m.censor는 이러한 문제를 해결하기 위해 사용됩니다. oncreate 속성을 제거하여 한 번만 호출되도록 보장하고, 호출자가 예기치 않은 버그를 처리하지 않도록 할 수 있습니다.

// 수정됨
function SomeFancyView() {
  return {
    view: function (vnode) {
      return m('div', m.censor(vnode.attrs), [
        // ...
      ]);
    },
  };
}

key 속성과 관련된 유사한 문제도 발생할 수 있습니다.

function SomePage() {
  return {
    view: function () {
      return m(
        Layout,
        {
          pageTitle: 'Some Page',
          key: someKey,
        },
        [
          // ...
        ]
      );
    },
  };
}

function Layout() {
  return {
    view: function (vnode) {
      return [
        m('header', [m('h1', 'My beautiful web app'), m('nav')]),
        m('.body', vnode.attrs, [
          // !!!
          m('h2', vnode.attrs.pageTitle),
          vnode.children,
        ]),
      ];
    },
  };
}

위 코드는 오류를 발생시킬 수 있습니다. Mithril.js가 Layout vnode를 만들 때 다음과 같은 구조를 갖게 됩니다.

return [
  m('header', [m('h1', 'My beautiful web app'), m('nav')]),
  m('.body', { pageTitle: 'Some Page', key: someKey }, [
    m('h2', 'Some Page'),
    [
      /* ... */
    ],
  ]),
];

특히 복잡하거나 다른 문제가 있는 실제 시나리오에서는 이러한 문제를 파악하기 어려울 수 있습니다. 이 문제를 해결하려면 key: 속성을 제거해야 합니다. 또한 DOM에 포함되는 것이 유용하지 않은 사용자 정의 pageTitle 속성도 제거할 수 있습니다.

// 수정됨
function Layout() {
  return {
    view: function (vnode) {
      return [
        m('header', [m('h1', 'My beautiful web app'), m('nav')]),
        m('.body', m.censor(vnode.attrs, ['pageTitle']), [
          m('h2', vnode.attrs.pageTitle),
          vnode.children,
        ]),
      ];
    },
  };
}