[React] Function and Class Components

1. Function and Class Components  ?

 

useEffect는 hook이다.

그럼 hook은 무엇인가? 그것을 알기전에 함수 컴포넌트와 클래스 컴포넌트에 대해 알아야 한다. 

일단 많은 블로그들이 "함수형 컴포넌트"라고 지칭하는데 React 공식문서에 가보면 Function component라고 되어있다.

즉 "함수 컴포넌트"가 맞다. 

 

그렇다면 왜 "함수형 컴포넌트"라는 말이 있을까?

이전에는 공식문서에서 Functional Component 즉 "함수형 컴포넌트"라고 네이밍 했는데  

함수형 컴포넌트를 사용하면 함수형 프로그래밍 방법으로 할 수 있다는 혼란을 불러일으킬 수 있다고 하여 Function Component로 이름이 바뀌었다고 한다. 

 

 

react에는 컴포넌트를 선언하는 방법이 두 가지가 있다.  

첫 번째는 클래스 컴포넌트 

두 번째는 함수 컴포넌트 

 

처음에 클래스 컴포넌트가 생겼고 나중에 함수 컴포넌트가 생겼다. 

이렇게 새로운 방법이 생겼는데 클래스 컴포넌트에서는 사용이가능한데 함수 컴포넌트에서는 사용하지 못하는 기능들이 몇몇 존재했다. 

그것을 보충하고자 생긴것들이 바로 hook이다. 

 

 

그렇다면 둘 중 무엇을 사용해야할까? 

React 공식 문서에서는 "함수 컴포넌트" 사용을 권장한다. 

그리고 왜 함수 컴포넌트와 hook을 만들었는지 공식문서에 나와있는데 이를 보면 클래스 사용을 지양할 것 같다.

 

Hook의 개요 – React

 

그렇다고 클래스 컴포넌트를 지원하지 않는 것도 아니다. 

 

이미 페이스북에 수만개의 class 컴포넌트가 존재하고 이를 함수 컴포넌트로 교체할 계획도 없다고 하였다. 

앞으로도 지속적으로 클래스 컴포넌트와 함수 컴포넌트를 함께 사용한다고 하였다. 

 

 

react로 오래전에 프로젝트를 시작했다면 클래스 컴포넌트가 남아있을 수 있으니 나중에 유지보수나 함수 컴포넌트로 변경하려고 할때 클래스컴포넌트에 대해 알아두면 유용할 것 같다. 

 

하지만 초보라면 함수 컴포넌트 부터 이해하는 것이 좋아보인다. 

 

 

Hook 자주 묻는 질문 – React

 

 

---

2. 함수 컴포넌트와 클래스 컴포넌트의 차이

 

클래스형과 함수형 차이

 

 

 

source

링크 1

링크 2