component란?

• 스타일을 만드는 Html 코드와 CSS코드와 어떠한 로직을 위한 JS의 결합이다.
• 우리는 이미 HTML, CSS, JS로 컴포넌트들을 만들 수 있다. 그런데 왜 리액트를 사용할까?
  바로 조금 더 간단히 사용자 인터페이스를 구축할 수 있기 때문이다.
  또한 컴포넌트를 또 만들필요가 없다. 왜냐하면 재사용이 가능하기 때문이다.

  리액트에서 컴포넌트는 JS 함수이다!!!

component 구성

• Html + CSS + JS = 1개의 component를 만들고 물론 CSS도 중요하지만 이중 가장 덜 중요한게 CSS이다.

왜 리액트는 컴포넌트의 전부라고 하는가?

• 왜냐하면 react는 이 component들을 재사용할 수 있게 해주고 우려사항들을 분리할 수 있도록 해주기 때문이다.

1.재사용

• 코딩은 같은 코드를 또 쓰는 것을 극도로 꺼려한다. 그렇기에 반복문이 있고 객체가 있어 미리 만들어 둔 것을 가져다 쓰는 것이다. react는 바로 web상에서 compent들을 반복할 필요가 없게끔 해준다.
• 또한 코드베이스를 작고 관리 가능한 단위로 유지할 수 있게 해준다.

2.Seperation

• 한 페이지에 너무 많은 코드가 있지 않도록 해준다.
  그리하여 한 페이지에 한 구체적인 로직만이 존재하게 해준다.

Delarative Approach

• 항상 원하는 최종상태 또는 다양한 상황에 따라 다른 목표 상태를 정의하는 것이 아주 중요하다.
• 즉, JS와 다르게 구체적인 concrete 코드로 DOM tree를 만들필요가 없고
  컴포넌트로 작업할 때에는 최종상태와 어떤 상황에서 어떤 상태가 사용되어야하는지 정의하면 된다.

종류

• Smart | 상태유지 컴포넌트 : State를 갖는 컴포넌트
• dumb | 프리젠테이셔널 컴포넌트 : data를 출력하기위한 컴포넌트
• 통상 여러분은 무상태컴포넌트 > 상태유지 컴포넌트 일것이다.

그럼 한 컴포넌트 당 하나의 파일을 만들면 결국 리액트 프로젝트에서 수십, 수백개의 파일을 갖게되는데
그게 정상이냐?
-네