[vue] instance와 component의 개념

Instance란?

• 인스턴스란?

  • 프론트 개발을 위해 필수적으로 생성하는 기본 단위 (? 뭐라는 겨)
  
  

• 생성자란? (=인스턴스 생성자란?)

  • 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션, 기능들을 미리 특정 객체에 저장 + 복붙해서 사용 (=확장성)

    • 생성자 함수(Constructor) = 거푸집

    • 인스턴스 = 거푸집으로 찍어낸 칼

      → 이렇게 생성된 인스턴스는 기존 객체의 프로퍼티(property)와 메소드(method)를 모두 상속(inheritance) 받음
      
      

• 뷰 인스턴스의 옵션 속성(property)들

  • template: HTML, CSS등 마크업 요소 정의
  • methods: 화면 로직 제어 시, 메서드를 정의 (마우스 클릭 이벤트 등)
  • created: 뷰 인스턴스를 생성하자마자 실행할 로직을 정의할 수 있는 속성
  
  
  

Component란?

• 조합하여 화면을 구성할 수 있는 블록 (화면 상 특정 영역)
  • 웹사이트는 header, content, footer 등으로 분할 → content 영역을 aside, list로 분할
  • 이 모든 요소들이 component가 될 수 있음
• nav bar, table, list, input box등 화면 구성요소들을 잘게 쪼개어 컴포넌트로 관리

📚 참고자료

• 인스턴스란?
  https://velog.io/@nasowoo/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4Instance

• Do it 시리즈 Vue.js 편
  https://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=278827076&gclid=Cj0KCQjwk7ugBhDIARIsAGuvgPZzXHXljr6neLGmz4MMx9E14IWCKkzSbVWOQ03ZHXuuj9iKD14AltkaAsqnEALw_wcB