React -1

Component-Driven User Interfaces

컴포넌트 중심의 사용자 인터페이스 -> 리액트를 이용하는 것
리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리이며 좀 더 간단히 사용자 인터페이스를 구축할 수 있기 때문에 사용

Components 컴포넌트

컴포넌트 = 리액트의 전부
-> 모든 사용자 인터페이스들은 결국 컴포넌트로 구성되기 때문

갈색 네모 친 부분이 같은 아이템이 2번 반복되는 것이 확인된다.
하지만 같은 아이템이지만 다른 데이터.
상단의 filter by year 부분의 막대와 차트는 같은 아이템이지만 다른 이름과 다른 금액들 담고 있다.
이것이 컴포넌트고 사용자 인터페이스에서 재사용할 수 있는 빌딩블럭

결국 컴포넌트는 스타일을 만드는 Html코드와 CSS코드 그리고 어떤 로직을 위한 자바스크립트의 결합
컴포넌트를 위해 컴포넌트를 재사용할 필요는 없다. 특징 중 하나일 뿐

최상단의 있는 Add New Expense 도 컴포넌트이며 버튼을 누를경우

이런식으로 더 많은 요소들이 들어가 있다.
아래의 filter부분도 컴포넌트이며 차트도 컴포넌트, 아이템 목록도 컴포넌트가 된다.

원할수록 더 세부적이게 컴포넌트들을 정리할 수 있고 이 컴포넌트들을 조합하여 사용자 인터페이스가 완성된다. 반대로 모든 사용자 인터페이스는 컴포넌트로 분리할 수 있다는 뜻이기도 함

리액트는 이런 컴포넌트에 관한 모든것이다. 각각의 컴포넌트를 구축하고 리액트에게 최종 사용자 인터페이스에서 어떻게 구성할 것인지 명령할 수 있다.

왜 컴포넌트를 쓰는가

• Reusability
  재사용이 가능 -> 반복을 피할 수 있게 해줌
• Separation of Concerns
  우려사항들을 분리할 수 있도록 해주기 때문 -> 코드베이스를 작고 관리 가능한 단위로 유지할 수 있게 해줌