1. Component란?

✅ 재사용 가능한 각각의 독립된 UI구성 단위를 말합니다.

사실 이 단어는 프로그래밍 전반에서 사용되는 용어인데요. 프론트엔드에서는 재사용 가능한 UI 단위를 말합니다.

2. Component를 왜 사용할까요?

✅ 일단 사용하면 편해집니다.

코드를 재활용할 때도 좋고 기능별로 코드가 나뉘어 있기 때문에 유지보수에 용이하겠죠. 만약 백번 사용된 컴포넌트가 있을 경우에 디자인 수정 요청이 들어와도 이 컴포넌트만 수정하면 되기 때문에 빠르게 수정할 수 있습니다.

컴포넌트는 또 다른 컴포넌트를 포함할 수 있는데, 해당 페이지가 어떻게 구성되어 있는지 파악하기에 용이합니다. 이전에는 방대한 양의 코드를 한 페이지에서 봐야 했다면, component를 사용하게 되면 기능별로 코드가 나뉘어져 있기 때문에 코드를 분석할 때도 좀 더 편하겠죠?~

3. Class Component와 Function Component

1) Class Component

• 초기에 많이 사용되던 컴포넌트 형태
• 함수형에 비해 문법과 사용법이 복잡함
• 하지만 클래스형으로 작성되어 있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할 수 있어야함

2) Function Component

• 클래스형 컴포넌트에 비해 간단하고 단순
• 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았음
• React 16.8 버전에서 hooks란 기능이 추가되면서 state를 관리할 수 있게 되어서 그 뒤로 자주 사용 됨.
• 실제 현업에서 가장 많이 사용되고 있다.