onMounted(), ref()

기능 개발하는데 배보다 배꼽이 더 큰 느낌이다... 자꾸 vue를 더 알아가는 기분인데 긍정적으로 생각하자

 

1) onMounted()

필자의 경우는 Javascript, JQuery를 했으므로 이것을 했던 사람들이 간단하게 이해하기 위해서는

 

window.onload = function(){ 

   /*

           작성 코드

   */

} 

 

라고 생각하면 될 것 같다. 즉 Dom이 완성된 후에 DomTree위에 올라탄다고 생각하면 된다.

 

    // 컴포넌트가 마운트된 후 초기화 작업

    onMounted(() => {

      alert("test");

    });

 

간단한 예시인데 Component가 활성화 되면 test라는 alert창이 나타난다.

 

document.reday(function(){

   /*

           작성 코드

   */

}

 

이 것과 착각하면 안된다. 왜나하면 documentready(function(){})은 Dom이 완성되기 전에 실행되는 것이다.

 

2) ref()

이것은 html 요소를 가져오기 위해서 참고한다는 의미이다.

 

다음 이미지를 참고하자.

 

첫 번째 부분이 <template> 부분이다. 두 번째 부분은 <script>부분이다.

필자의 경우는 아이디 비밀번호 유효성을 체크를 위해서 아이디와 비밀번호가 없을 경우 script단에서

저렇게 하였다.

<input> 안에 있는 ref="emailInput"을 통해서 javascript단에서 컨트롤하는 것이다.

 

※ 스크립트 단에서만 하는 것이 아니라 XSS 방지를 위해서 Backend에서도 인코딩이나 유효성 검증을 하자.