10/02

Vue

1. $nextTick()

• Reference : https://backback.tistory.com/382

• 공식 문서 : https://kr.vuejs.org/v2/api/#Vue-nextTick

• 왜 사용?

: 한 마디로, 데이터를 변경한 후, DOM이 업데이트 되기를 기다리기 위해 사용!!

: 오류 코드에서, data에 따라 변하는 DOM이 생성되기전에 찾아서 처리하려고 할 경우에 찾지 못하는 에러가 발생

: DOM 조작을 위해 사용하는데 유용하다. => 콜백함수 형식으로 동작

• 오류 코드

onClickTitle() {
            this.isEditTitle = true; //(1)

            const $inputTitle = this.$refs.inputTitle; //(2)

            this.$nextTick(() => {
                // const $inputTitle = this.$refs.inputTitle; //(3)                $inputTitle.value = this.board.title;
                $inputTitle.focus();
            });
        },

1. isEditTitle에 따라 ref="inputTitle" 값을 가지는 input태그가 DOM에 생성/삭제 된다. 이때 isEditTitle = true로 변경 후 input 태그를 뷰 컴포넌트에 마운트하고, $refs를 통해서 참조하려고 했는데 태그를 찾지 못하는 에러가 발생했다.

2. 이유 : DOM이 완성되기 전에 호출해서 태그를 찾지 못한다. 즉 DOM이 갱신되기 전에 태그를 호출하는 구문이 실행된 것이다.

3. (3)번 라인에서는 태그를 찾을 수 있다.
   => nextTick() 덕분에 DOM이 갱신된 후 콜백함수가 실행되고, $refs를 통해 input 태그를 찾을 수 있다.

v-show, v-if

• 차이점 ?
• 언제 사용?

CSS

white-space : nowrap

=> 줄 바꿈을 하지 않는다..?