예외적인 상황들

이 페이지는 여러분이 이미 컴포넌트 기초를 읽었다고 가정하고 쓴 내용입니다. 컴포넌트가 처음이라면 기초 문서를 먼저 읽으시기 바랍니다.

Note

이 페이지의 문서에서는 Vue의 규칙을 우회해야만 하는 극단적인 예외상황(일반적인 경우 발생하지 않는 상황)을 의미하는 엣지 케이스의 처리에 대한 문서입니다. 그러나 엣지 케이스를 처리하는데, 모두가 위험할 수 있는 단점이나 상황이 있다는 점을 유의하십시오. 각각의 상황에 대해서 발생할 수 있는 문제가 작성되어 있으니 꼭 유의하고 해당 기능을 사용할지 결정하세요.

업데이트 컨트롤

Vue의 반응형 시스템 덕분에, (올바르게 사용했다면) Vue는 항상 언제 업데이트가 일어나야하는지 알 수 있습니다. 하지만 예외적으로, 반응형 데이터가 변경되지 않았음에도 불구하고 강제로 업데이트해야 하는 상황이 있습니다. 혹은, 불필요한 업데이트를 방지하고자 하는 경우가 있을 수도 있습니다.

업데이트 강제하기

Vue에서 업데이트를 강제로 해야한다면 99.99%의 경우는 어딘가 잘못된 것입니다. 예를 들어, Vue의 반응형 시스템이 추적하지 못하는 상태에 의존하고 있는 경우(예: 컴포넌트 생성 후 data 속성이 추가된 경우)가 있습니다

그러나 위의 상황에 배제하고 수동으로 업데이트를 강제해야하는 극히 드문 상황인 경우 $forceUpdate를 사용하여 업데이트를 강제할 수 있습니다.

v-once를 이용한 가벼운 정적 컴포넌트

Vue에서 일반 HTML 엘리먼트를 렌더링하는 것은 매우 빠르지만, 때로는 많은 정적 컨텐츠를 포함하는 컴포넌트가 있을 수 있습니다. 이러한 경우 다음과 같이 루트 엘리먼트에 v-once 디렉티브를 추가하여 한 번만 평가한 다음 캐시되도록 할 수 있습니다.

app.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... 많은 정적 컨텐츠 ...
    </div>
  `
})

TIP

다시 한번 강조하지만 이러한 패턴을 남용하지 마세요. 정적 컨텐츠를 많이 렌더링해야 하는 드문 경우에는 편리하지만, 실제로 느리게 렌더링되는 것을 인지하지 않는 한 필요하지 않습니다. 게다가 나중에 많은 혼란을 일으킬 수 있습니다. 예를들어 v-once에 익숙하지 않거나 단순히 템플릿에서 v-once를 놓친 다른 개발자를 상상해보십시오. 템플릿이 올바르게 업데이트되지 않는 이유를 파악하기 위해 몇 시간을 소비할 수 있습니다.