[React] 리엑트 살펴보기3: 컴포넌트와 hooks의 등장배경(클래스 컴포넌트, 함수 컴포넌트)

1. 컴포넌트란

---

컴포넌트란, 독립적으로 사용가능한 UI단위를 의미한다. 이는 실제 html 요소인 button이나 input이 될수도 있고, 작은 컴포넌트들을 조립한 form 처럼 복합적인 컴포넌트일수도 있다. 리엑트에서 컴포넌트는 data를 다루는 로직 부분과 ui 부분으로 구성된다. 

 

2. 클래스 컴포넌트 vs 함수 컴포넌트

---

컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 구분된다.

 

클래스 컴포넌트

• class 문법으로 React.Component를 상속하여 만드는 컴포넌트
• 생성자 함수에서 this로 state를 초기화한다.
• 컴포넌트 라이프 사이클별 메소드를 사용할 수 있다.(컴포넌트가 mount, update, unmount 되는 시점에 사이드 이펙트를 할 수 있음)
• render 메소드를 통해서 JSX를 반환한다.

 

함수 컴포넌트

• 함수 형태로 만드는 컴포넌트
• useState 훅을 통해서 state를 초기화한다.
• useEffect 훅을 통해서 라이프 사이클에 사이드 이펙트를 할 수 있다.
• return 값에서 JSX로 ui를 반환한다.

 

3. 어느 컴포넌트가 주로 사용되는가.

---

16.8 버전 이전에서는 훅이 없어서 함수 컴포넌트는 자체적인 state를 가질 수도 없었고 사이드 이펙트를 만들 수도 없었다. 따라서, 클래스 컴포넌트를 주요 컴포넌트로 사용하고 함수 컴포넌트는 클래스 컴포넌트의 props를 전달받는 하위 컴포넌트로 이용되었다.

하지만, 클래스 컴포넌트에는 불편한 점이 있었다.

• 클래스 컴포넌트에서 상태값을 조정하기 위한 this는 동적으로 변화하기 때문에, 상태값을 바꾸는 과정에서 컴포넌트가 언마운트되거나 하는 등의 변화로 this의 대상이 바뀌었다. 따라서 일일히 바인딩을 해주는 불편함이 있었다.
• 공용 컴포넌트를 만들기 위해서 HOC(고차 컴포넌트)를 이용한 랩핑 방식을 썼는데, 이는 가독성이 좋지 않았다.

 

그런 상황에서 16.8 버전에 훅이 추가되며 함수 컴포넌트도 클래스 컴포넌트의 기능을 가질 수 있었고 재사용성과 가독성면에서 이점을 가져 주류가 되었다.