3-1. 클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두 가지이다.

1. 함수 컴포넌트

import './App.css';

function App() {
	const name = '리액트';
	return <div className="react">{name}</div>;
}

export default App;

1. 클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
	render() {
		const = 'react';
		return <div className="react">{name}</div>;
	}
}

export default App;

✓ 클래스형 컴포넌트에서는 render 함수가 반드시 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.

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

• 클래스형 컴포넌트

  • 장점 : state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다.

• 함수 컴포넌트

  • 장점 : 클래스형 컴포넌트보다 선언하기 쉽고 메모리 자원을 덜 사용한다.
  • 단점 : state 기능 및 라이프사이클 기능을 사용할 수 없다.

  → 이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다.

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있지만, 그렇다고 해서 클래스형 컴포넌트가 사라지는 것은 아니다.

• 이 책의 초반부에서는 클래스형 컴포넌트 위주로 사용하고, 후반부에서는 함수 컴포넌트와 Hooks를 기반으로 컴포넌트를 작성한다.