[Vue]컴포넌트와 뷰의 차이

프론트 영역을 개발할 때,
Vue.js 프레임워크를 이용하였습니다.
여기서 Component, View 2개 폴더가 있었고, 해당 영역의 차이를 작성해놓고 싶었습니다.

• 컴포넌트
  • 피그마 작업을 할 때, 원자성 형태로 요소들을 만들게 된다면, 재사용하기 편리하다고 했습니다.
  • 여기서 컴포넌트는 Vue.js에서 재사용 가능한 코드 블록을 나타냅니다.
  • Vue.js 앱은 작은 컴포넌트들의 조합으로 구성됩니다.
  • 각 컴포넌트는 자체 스코프를 가지며, 데이터, 메소드, 라이프사이클 훅 등을 정의할 수 있습니다.
  • 컴포넌트는 재사용성과 유지보수성을 높이는데 중요한 역할을 하게됩니다.

뷰 영역을 가기전, 자체 스코프, 데이터, 메소드 라이플사이트 훅 등을 이야기하고 넘어가겠습니다.

• 자체 스코프(Component Scope)
  • 이는 컴포넌트 내에서 정의된 변수, 함수, 메소드 등은 해당 컴포넌트 내에서만 유효하다는 말입니다.
  • 컴포넌트 간의 간섭을 최소화하는 데 도움이 됩니다.
• 데이터(Data)
  • 컴포넌트 내에서 사용되는 정보를 나타냅니다.
  • data속성을 사용하여 Vue 인스턴스 내부에 데이터를 정의할 수 있습니다.
  • 데이터는 Vue의 반응성 시스템에 의해 관리되며, 데이터가 변경될 떄 마다 화면이 자동으로 업데이트 됩니다.
• 메소드(Methods)
  • Vue 컴포넌트 내에서 사용되는 함수를 나타냅니다.
  • 메소드를 사용하여 사용자 이벤트에 응답하거나 데이터를 조작하는 등의 작업을 수행할 수 있습니다.
• 라이프사이클(Lifecycle)
  • Vue 컴포넌트가 생성되고 소멸될 때 발생하는 일련의 이벤트를 나타냅니다.
  • Vue 컴포넌트의 라이프사이클 이벤트는 생성, 갱신, 소멸 등의 단계로 구분됩니다.
  • 각 단계에서는 미리 정의된 훅(hook)함수를 사용하여 특정 작업을 수행할 수 있습니다.

    export default {
      created() {
        console.log('컴포넌트가 생성되었습니다.');
      },
      updated() {
        console.log('컴포넌트가 갱신되었습니다.');
      },
      destroyed() {
        console.log('컴포넌트가 소멸되었습니다.');
      }
    }

• 뷰(View)
  • 뷰는 사용자에게 보여지는 화면을 나타냅니다.
  • Vue.js에서는 뷰를 효과적으로 관리하기 위해 컴포넌트를 사용합니다.
  • 뷰는 사용자와 상호작용하며, 사용자 인터페이스를 나타내는 역할을 합니다.
• 정리
  • 컴포넌트는 뷰를 구성하는 작은 단위이며, 뷰는 이러한 컴포넌트들이 조합되어 사용자에게 보여지는 전체적인 화면입니다.