[Vue] nextTick 활용 (#1)

input 요소 처리 시 nextTick 이 사용 될 만한 예제에 대해 설명해 보겠습니다.

 

먼저 input 에 대한 입력 조건은 아래와 같습니다.

1. 숫자만 입력 가능하다.
2. 6자리 이상은 입력되지 않는다.

위에 대한 조건을 바탕으로 하는 기본 코드는 아래와 같습니다.

 

  <template>
    <input type="text" name="birth" placeholder="ex) 200414" v-model="birth" />
  </template>

  <script setup>
    import {ref, watch} from 'vue'

    const birth = ref('')

    watch(() => birth.value, newValue => {
      if (newValue.length > 6) {
        birth.value = birth.value.slice(0, 6)
      } else {
        birth.value = allowOnlyNumber(newValue)
      }
    })

    function allowOnlyNumber(v) {
      return v.replace(/[^0-9]/gi, '')
    }
  </script>

 

위의 코드를 실행 시 숫자와 영어 입력 시 조건에 부합하는 결과가 나오게 되는데요,

만약 한글을 입력하게 된다면, 그대로 표시가 되는 걸 보실 수 있습니다.

이유를 찾아보니...

 

---

영어 문자의 경우 vuejs 와의 입력과 동기화가 잘되므로 데이터 모델 변경 시 뷰에 즉각적인 반영에 있어서 문제가 없다고 합니다.

하지만 한글은 조합형 문자인 경우가 있고 이러한 경우에 문자열의 변화가 느려질 수 있는데, 이때 vuejs 의 비동기 업데잍으 매커니즘과 충돌하는 등의

영향이 있을 수 있다고 합니다. 그래서 한글 입력 시 데이터 모델 변경이 뷰에 반영되는데 문제가 생길 수 있다고 하네요.

결국은 영어와 한글의 입력 차이에 의한 것이라는 거죠

---

 

물론 문자를 더 입력하거나 포커스가 바뀐다면 삭제가 되긴 하겠지만 일단 input 에 노출 되는게 거슬릴 수도 있겠죠...?

아무튼 이 때 사용하는 것이 바로 nextTick 입니다.

nextTick 을 사용하여 수정 된 코드는 아래와 같습니다.

 

  <template>
    <input type="text" name="birth" placeholder="ex) 200414" v-model="birth" />
  </template>

  <script setup>
    import {ref, watch, nextTick} from 'vue'

    const birth = ref('')

    watch(() => birth.value, newValue => {
      nextTick(() => {
        if (newValue.length > 6) {
          birth.value = birth.value.slice(0, 6)
        } else {
          birth.value = allowOnlyNumber(newValue)
        }  
      })  
    })

    function allowOnlyNumber(v) {
      return v.replace(/[^0-9]/gi, '')
    }
  </script>

import 에서 nextTick 을 선언해주고 watch 에서 조건 처리 시 nextTick 으로 감싸주었습니다.

이렇게 하면 숫자나 영어 처럼 한글을 입력시에도 input 박스에 한글이 노출되지 않습니다.

이는 nextTick 이 DOM 업데이트 이후에 실행 이 되기 때문인데요, 이를 이해하기 위해서 Vue 의 화면 처리에 대해 알아야 하는데요...

아래는 관련 내용에 대해 알아보고 이해한 내용을 바탕으로 작성한 것입니다.

 

먼저 알아야 할 개념은 2가지 입니다.

1. vuejs 는 단일 스레드 모델이다.
2. DOM 업데이트 및 렌더링을 비동기로 처리한다.

위 2가지를 바탕으로 설명하자면,

Vue Component 에서 데이터 변경이 일어나면 DOM 을 즉시 업데이트 하지 않고 대기열에 추가한 후에 비동기 적으로 처리하게 됩니다.

이렇게 대기열에 추가하여 작업하게 되면 데이터 변경이 일어날 경우 동일 데이터 대한 중복 업데이트가 방지 되며 이로 인해 성능이 올라가게 되죠.

또한 DOM 에 대한 업데이트 역시 대기열에 추가하여 여러 업데이트를 모아서 비동기적으로 DOM 업데이트를 수행합니다.

 

어떤 매커니즘으로 중복 업데이트가 방지되며 DOM 이 업데이트 처리 되는지는 아직도 잘 이해가 가진 않지만...

아무튼 위의 내용에서 DOM 이 업데이트를 수행한 다음에 호출되는 함수가 바로 nextTick 입니다.

(데이터 모델의 변경이 뷰에 반영 된 후에 호출된다는 말입니다.)

한글을 입력하였을 때 DOM 에 한글이 업데이트 된 후에 호출되어 조건에 맞는 처리를 하게 되므로 한글도 표시되지 않게 되는 것입니다.

결론은, DOM 업데이트 이후에 추가적인 작업, 어떠한 동작이 필요할 때 nextTick 을 활용하면 되겠습니다.