Component와 hooks

Component

• UI 또는 기능을 부품화해서 재사용 가능하게 하는 것
• 복사/붙여넣기와 다름!
  수정사항은 원본에만 적용하면 모두 적용됨
• 각 컴포넌트에 맞게 데이터를 변경하여 사용 가능
• 페이지도 하나의 큰 컴포넌트가 될 수 있음 = 페이지 컴포넌트

클래스형/함수형

구분	클래스형 컴포넌트	함수형 컴포넌트
state, lifeCycle 관련 기능	사용 가능	불가능 --> React-Hooks를 통해 해결
메모리 자원	함수형보다 더 사용	클래스형보다 덜 사용
	임의 메서드 정의 가능	컴포넌트 선언이 편함

• 함수형이 클래스보다 후에 나왔기 때문에 더 편함, 최근에는 함수형을 더 많이 사용
  but, 과거에 많이 사용했음, 유지보수를 위해 알아둬야 함

• 클래스형의 많은 기능들이 defrecated됨(더이상 지원하지 않음)

• 클래스형과 함수형은 공존이 가능
  ex) 등록은 클래스형으로, 상세 화면은 함수형으로

• 함수형 컴포넌트 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없음
  --> hooks이 나와서 가능해짐

• 함수형 컴포넌트: function으로 시작

  함수와 함수형 컴포넌트의 차이

  • 함수는 함수 안에 HTML이 들어가지 않음
  • 함수형 컴포넌트는 안에 HTML이 포함되어 있음

---

Hooks

• hook은 use로 시작한다. (useState, useEffect 등)
• 함수형으로도 클래스형과 동일한 기능을 사용 가능하도록 만든 도구
• react-hooks가 나오면서 함수형 컴포넌트가 가능해졌다.