[React] Class vs Function component

React는 컴포넌트들로 이루어져 있습니다.
컴포넌트를 만드는 방법은 대표적으로 Class를 사용하는 방법과 Function을 사용하는 방법이 있습니다.
각각의 특징에 대해 알아보도록 하겠습니다.

 

---

Class 컴포넌트 - React에서 제공하는 컴포넌트를 extends하여 사용

 

Class component

state

• Class에 포함되는 데이터가 저장되는 객체입니다.
• state가 변경되면 render()가 호출되면서 컴포넌트를 다시 그립니다.

 render()

• render()는 클래스 컴포넌트에서 반드시 정의해야 하는 메서드입니다.
• React에서 정의한 컴포넌트, 여러개의 엘리먼트를 묶어 표시할 수 있는 Fragment등이 render()에 포함됩니다.
• 브라우저와 직접적인 상호작용을 하지 않습니다.

lifecycle methods

• lifecycle methods란 컴포넌트가 사용자에게 보여지거나 없어질 때, 업데이트 되었을 때, DOM tree에 올라갔을 때 등의 특정 시점에 따라 코드가 실행되도록 하는 메소드 입니다.

 

📒 자주 사용되는 lifecycle method

 1. 마운트

• 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 시점
• render()
• componentDidMount()
  • 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다.
  • DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.

 2. 업데이트

• props 또는 state가 변경되는 시점
• render()
• componentDidUpdate()
  • 해당 메소드는 컴포넌트 업데이트가 일어난 직후에 호출됩니다.
  • 이 메서드는 최초 렌더링에서는 호출되지 않습니다.

 3. 마운트 해제

• 컴포넌트가 DOM상에서 제거되는 시점
• componentWillUnmount()
  • 해당 메소드는 컴포넌트가 마운트 해제되어 DOM에서 제거되기 직전에 호출됩니다.
  • 메서드 내에서 타이머 제거, 네트워크 요청 취소 요청 등을 수행할 수 있습니다. 

 

📌 Class 컴포넌트는 언제 사용할까?

컴포넌트가 데이터를 소유하고 있고 주기적으로 업데이트 되어야 한다면 Class를 사용하는 것이 좋습니다.

 

 

---

 

Function 컴포넌트 - 함수로 컴포넌트를 구현

 

Function component

Fucntion 컴포넌트에는 state와 lifecycle methods가 존재하지 않습니다.

 

📌 state와 lifecycle methods가 왜 존재하지 않을까?
함수는 한 가지의 기능(업무)을 수행하는 단위이기 때문에 state객체나 method가 존재하지 않습니다.

 

그러나,
React 16.8 version부터 Hook이 도입되면서 Function 컴포넌트에서도 state와 lifecycle method를
사용할 수 있게 되었습니다! 이로 인해 Class 컴포넌트에서만 사용할 수 있던 state와 lifecycle method
뿐만 아니라 여러 기능들을 사용할 수 있게 되었습니다.
현재에는 Function 컴포넌트 방식에서는 대부분 Hook을 함께 사용하고 있습니다.

 

📌 Hook은 왜 도입 되었을까?
 기존 Class 컴포넌트에서 가능한 기능들을 가능할 수 있도록 해줍니다.
 Class는 Function 컴포넌트보다 어렵습니다.
 class의 경우 this가 필요하여 데이터 바인딩 이슈가 발생할 수 있습니다.
 Functional programming이 트렌드화 되면서 React에서도 적용을 시도하였습니다.

 

📌 Class 컴포넌트 대신 Hook만 배워도 될까?
 Hook이 많은 장점을 가지고 있지만 이미 시장에 나와있는 상품들 중에는 Class로 작성된 것들이 많기 때문에
 Class형도 숙지하는 것이 좋습니다.

 

📌 Function 컴포넌트는 언제 사용하나요?

컴포넌트에 state가 없고 항상 정적으로 데이터가 표기된다면 간단하게 Function방식을 사용하는 것이 좋습니다.