[Svelte] 두 가지 종류의 컴포넌트 (Container VS Presentational component)

 

 

 

 

 

 

🌈 Container (=Stateful components) VS Presentational component

Svelte.js - 완벽 가이드의 [섹션 5:: 강의 프로젝트 첫 번째 단계] 를 수강한 후에 정리한 내용이다.

 

 

 

 

 

 

 

 

1️⃣ Container (=Stateful components)

◾ 데이터를 가지고 있으면서 관리하는 역할을 한다.

◾ 다른 컴포넌트에 데이터를 전달한다.

◾ 스테이트풀에서의 스테이트(=상태)는 데이터를 의미한다.

◾ 스테이트풀의 데이터는 정적일 필요가 없고, 상호작용에 의해 서버로부터 페칭(fetch)되어 변경될 수 있다.

◾ 예) App, Product ... : 데이터 관리를 위한 루트 위치 또는 메인 기능 컴포넌트

◾ 스테이트풀 컴포넌트는 소수이다.(유지보수↑)

 

 

 

2️⃣ Presentational component

◾ 프레젠테이션 컴포넌트에는 정적인 데이터가 있는데, 이 데이터는 모두 외부로부터 수신한 데이터이다.

◾ 프레젠테이션 컴포넌트에서는 데이터를 변경하는 일이 거의 없다.

◾ 데이터를 조작하지 않고 출력만 한다.

◾ 사용자와 상호작용하는 버튼을 출력할 수 있으나, 상호작용에 의해 발생한 데이터를 그대로 스테이트풀

   컴포넌트에 입력하고 스테이트풀 컴포넌트가 이 데이터를 받아 변경하거나 필요한 작업을 하게 된다.

◾ 예) Modal, Card, Button ... : 사용자 인터페이스 요소에 해당한다.

◾ 프레젠테이션 컴포넌트는 다수이다.

 

두 개의 큰 컴포넌트로 나누는 이유는 유지보수를 쉽게 하기 위함이며, 모든 컴포넌트가 모든 작업을 할 수 있게 된다면 애플리케이션의 규모가 커질수록 관리하기 힘들어질 것이다.