[3장 컴포넌트] 클래스형 컴포넌트

2장에서 봤던 App 컴포넌트는 함수형 컴포넌트며, 코드가 다음과 같은 구조로 이루어져있다 

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

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

export default App;

 

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

하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다 

클래스형 컴포넌트가 어떻게 이루어져있는지 확인해보자 

App.js코드를 한번 다음과 같이 수정해보자 

import React, { Component } from "react";

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

export default App;

 

 

클래스형 컴포넌트로 바뀌었지만 역할은 이전에 보았던 함수형 컴포넌트와 똑같다 

클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 이후 배울 state기능 및 라이프사이클 기능을 사용할수 있다는 것과 임의 메서드를 정의 할수 있다는 것이다 

 

ES6의 클래스 문법 

ES6이전에는 자바스크립트에 클래스가 없었다 

개념 자체는 있었지만 그것을 구현 하려면 class대신 prototype이라는 문법을 사용하여 다음과 같이 작업 해야 했었다 

function Dog(name) {
  this.name = name;
}

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

var dog = new Dog("검둥이");
dog.say();

ES6 문법부터는 이것과 기능이 똑같은 코드를 class를 사용하여 다음과 같이 작성 할수 있다 

class Dog {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name + ": 멍멍");
  }
}
const dog = new Dog("흰둥이");
dog.say();

 

클래스형 컴포넌트에서는 render함수가 꼭 있어야 한다 

그안에 보여줘야 할 JSX를 반환해야 한다 

 

컴포넌트를 선언할수 있는 두가지 방법중 어느상황에 함수형 컴포넌트를 사용하는것일까?

함수형 컴포넌트의 장점을 나열해보면 다음과 같다 

• 클래스형 컴포넌트보다 선언하기 쉽다 
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다
• 프로젝트를 완성하여 빌드한후 배포 할때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 size가 작다 

단점 

• state와 라이프사이클 API 사용이 불가능 (v16.8 이후 Hooks라는 기능이 도입되면서 해결됨)