클래스형 컴포넌트

App 컴포넌트는 함수형 컴포넌트며, 코드가 다음과 같은 구조로 이루어져 있다.

import React from 'react';
import './App.css';

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

export default App;

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

클래스형 컴포넌트는 다음과 같이 이루어져 있다.

import React, { Component } from 'react';

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

export default App;

클래스형 컴포넌트로 바뀌었지만 역할은 이전에 보았던 함수형 컴포넌트와 똑같다. 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메소드를 정의할 수 있다는 것이다.

// ES6 이전
function Dog(name) {
	this.name = name;
}

Dog.prototype.say = function () {
	console.log(this.name + ': 멍멍');
}

var dof = new Dog('시추');
dog.say(); // 시추: 멍멍

// ES6 이후

class Dog {
	constructor(name) {
    	this.name = name;
    }
    
    say() {
    	console.log(this.name + ': 멍멍');
    }
}

const dog = new Dog('불독');
dog.say(); // 불독: 멍멍

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

함수형 컴포넌트의 장점으로는 우선 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 또한, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.

함수형 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 점이다. 이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 완전히 클래스형 컴포넌트와 똑같이 사욜할 수 있는 것은 아니지만 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었다. 

리액트 공식 메뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 하지만 그렇다고 해서 클래스형 컴포넌트가 사라지는 것은 아니므로 클래스형 컴포넌트의 기능도 꼭 알아 두어야 한다.