Feature: component로 분리

[meeyoungchoi-front-dev]

Fruits를 출력해주는 코드를 컴포넌트로 분리하였다

컴포넌트란

• 재사용이 가능한 각각의 독릭된 모듈이다 (재사용 가능한 UI 코드 조각)

컴포넌트 기반 개발의 특징

• 소프트웨어의 재사용성을 높인다
• 컴포넌트는 독립적인 기능을 수행하는 모듈로서 이후 시스템을 유지보수 하는데 있어 교체 가능한 부품이다
• 하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있다
• 컴포넌트와 클래스는 다른 개념이며, 컴포넌트와 객체 또한 다른 개념이므로 컴포넌트가 되기 위해서는 반드시 클래스나 객체로 만들어야 한다는 것은 아니다
• 컴포넌트를 개발하는데 있어 객체지향 기술을 바탕으로 하는 것이 보다효과적을 수 있다
• 하나의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발할 수 있으며 이렇게 개발된 컴포넌트가 실행될 때 해당 컴포넌트 인스턴스(Instance)인 컴포넌트 객체가 수행된다
• 컴포넌트 내부에는 하나 이상의 클래스에 대응하는 하나 이상의 객체들이 수행되고 있는 것이라고 생각할 수 있다

컴포넌트의 종류

• page : 모든 구성요소를 포함하는 가장 큰 단위로 single template와 multi-page template 이 있다
• dialog : 대화상자
• header bar : 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된 버튼이 위치한다
• footer bar : 페이지 하단에 위치하면서 버튼이 위치한다
• navbars : 일반적으로 header bar 나 footer bar 내에 위치하면서 특정한 페이지로 이동하는 메뉴의 역할
• button : 버튼
• form : 사용자로부터 데이터를 입력받는 컨트롤
• list view : 여러개의 항목을 열거하는데 사용되는 컨트롤

https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/

[meeyoungchoi-front-dev]

1. Import it in the file where you’ll use the component (using the corresponding technique for importing [default]

   • A `

   • export creates a component prop

     • Svelte uses the export keyword to mark a variable declaration as a property or prop, which means it becomes accessible to consumers of the component ``

https://svelte.dev/repl/74593f36569a4c268d8a6ab277db34b5?version=3.12.1