[React] 클래스 컴포넌트와 함수형 컴포넌트(component)

Component

• React의 꽃이라 불리는 React의 핵심
• React 에서 화면을 구성하는 하나의 부분
• 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능

 

Component 트리 구조

 

React 컴포넌트 종류

(1)  클래스형 컴포넌트 (Class Component)
• render 함수를 반드시 사용해야 함
• lifecycle 기능
• 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용

(2)  클래스형 컴포넌트 (Class Component)
• render 함수를 반드시 사용해야 함
• lifecycle 기능
• 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용

 

Component 를 만드는 방법

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

• React 초창기에는 함수형 컴포넌트에는 현재 리액트의 핵심기능(state, lifecycle..)등 기능을 사용할 수 없음
• React 16.8 부터 hooks 의 등장으로 함수형 컴포넌트에도 핵심기능을 사용할 수 있게 되었음
• 과거에는 다양한 기능을 사용할 수 있는 클래스형 컴포넌트를 사용했지만, 현재는 더 쉬운 문법을 가지고 있는 함수형 컴포넌트의 사용 비율이 압도적으로 높음
• 공통적으로 컴포넌트의 이름은 PascalCase 사용!
클래스형 컴포넌트를 만드는 방법도 배울거지만, 저렇게 쓰는구나 ~ 하고 알아만 주시면 됩니다

 

클래스형 컴포넌트

import React, {Component} from 'react';
class ClassComponent extends Component {
	render() {
		return(
			<h1>Class Component 입니다.</h1>
		);
	}
}
export default ClassComponent;

 

함수형 컴포넌트

export default const FunctionComponent = () =>
{
	return
		<div>
		Funtional Component 입니다
		</div>
};