Vue 컴포넌트 개념이해 1 - snippet, Lifecycle Hooks

이번 포스팅에서는 Vue 컴포넌트에 대해서 알아보고자 합니다.

 

컴포넌트란 ?

View, Data, Code의 세트라고 이해할 수 있다.

컴포넌트는 HTML 코드, 자바스크립트 코드, 데이터가 존재한다. 

가장 큰 장점은 재사용이 가능하다는 것이다.

즉, 다른 컴포넌트에 import가 가능하다.

 

Snippet 설정하기

snippet이란 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와 사용하는 기능이다.

snippet을 사용하는 방법은 파일 > 기본설정 > 사용자코드조각구성 이다.

 

 

그 후 vue를 입력하고 아래와 같이 내용을 수정해준다.

"Generate Basic Vue Code": {    "prefix":"vue-start",    "body": [        "<template></template>\n<script>\n\nexport default{ \n\tname:'',\n\tcomponents:{},\n\tdata() {\n\t\treturn{\n\t\t\tsampleData:''\n\t\t};\n\t},\n\tbeforeCreate(){},\n\tcreated(){},\n\tbeforeMount(){},\n\tmounted(){},\n\tbeforeUpdate(){},\n\tupdated(){},,\n\tbeforeUnmount(){},\n\tunmounted(){},\n\tmethods : {}\n}\n</script>"    ],    "description": "Generate Basic Vue Code"}

Lifecycle Hook 다이어그램 

모든 컴포넌트는 생성될 때 초기화 단계를 거치게 됩니다.

Vue 컴포넌트가 개발 시 각 라이프 사이클 훅에 따라 프로그럄을 적절히 배치하면 화면 로딩 시간을 개선할 수 있습니다. 

사용자가 느끼는 체감 속도를 높이기 위해 다이어그램을 숙지하는 것이 중요합니다.