컴포넌트의 기초

컴포넌틀르 어떻게 정의하고 등록하고 사용할 것인가

컴포넌트 이해하기 시간

컴포넌트

UI를 재사용할 수 있도록 재사용한 것임.

UI를 재사용할 수 있기 때문에 매우 효율적임.

UI를 독립적으로 나눔으로써 코드를 클린하게 사용할 수 있음

정의 -> 등록 -> 사용

컴포넌트 정의

Single File Component (SFC) : 이게 실무에서 일반적이다.

.vue 파일 확장자로 만드는 것임

문자열 템플릿

templat : `` 안에 넣는 것이다.

빌드 도구를 활용하지 않을 때 사용함.

거의 안쓰임.

지난번 bootstrap 적용파일을 나누자.

컴포넌트의 등록

• 전역적인 등록
• 지역적인 등록

전역적인 등록은 어디서든 사용할 수 있음. (main.js 에 등록함)

지역 등록은 다름 지역등록은 해당 vue 안에서 컴포넌트를 가져와서 사용함.

전역으로 등록하면 다음과 같은 문제가 있다. 최종 빌드에 해당 컴포넌트가 계속 포함되고 그러면 application의 크기가 계속 커짐.

또 소스코드를 볼 때 종속관계를 파악하기가 힘들다.

그러므로 지역등록을 잘하는 것이 좋다.

컴포넌트의 사용

얼마든지 사용할 수 있고

생성될 때 새 인스턴스가 생성되는 것임

하나가 생성될 때 마다 setup 함수가 실행된다.;

그리구 컴포넌트 사용할 때 pascal Case (중간 중간에 대문자 사용) camel Case (중간에 - 를 사용함 )를 사용하기도 함.

보통은 파스칼케이스 사용함.

컴포넌트 스타일 가이드

SFC 명명 귬칙

파스칼 케이스 혹은 케밥케이스

버튼, 테이블

그 base 를 붙이기를 권장한다.

baseButton 뭐 이렇게

싱글 인스턴스 컴포넌트 이름

the를 접두사로 시작한다.

sidebar heading 을

theSidebar theHeading

이런건 권장사항이고 팀이나 회사에서 정의한 것들을 사용하라