[리액트를 다루는 기술] Component

템플릿(template) 이란?

user interface를 다룰 때 사용할 수 있고, 보통 data set이 주어지면 HTML 태그 형식을 문자열로 반환한다.

 

컴포넌트(component)란?

다른 framework에서 user interface를 다룰 때 사용하는 템플릿과는 다른 개념이다.

컴포넌트는 재사용이 가능한 API로 많은 기능들이 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

 

컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있다.

 

컴포넌트를 선언하는 방식은 함수형 컴포넌트, 클래스형 컴포넌트 두 가지이다.

 

함수형 컴포넌트 vs 클래스형 컴포넌트

함수형 컴포넌트

• 장점
  • 클래스형 컴포넌트보다 선언하기가 편하다.
  • 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.
• 단점
  • state와 라이프사이클 API의 사용이 불가능하다.
    (리액트 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결)