[리액트] Function vs Class(Component) 클래스형 컴포넌트와 함수형 컴포넌트의 차이

컴포넌트를 선언할 수 있는 방법에는 2가지가 있습니다.

함수형 컴포넌트와 클래스형 컴포넌트 인데요.

함수형과 클래스형을 비교하여 사용하는 법을 정리해보고자 합니다.

 

클래스형 컴포넌트와 함수 컴포넌트의 차이점

Class component 클래스 컴포넌트의 장점

• state 기능을 사용할 수 있다.
• 함수를 이용한 라이프사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.

---

Function component 함수 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언하기가 쉽다.
• 클래스형 컴포넌트 보다 메모리를 덜 사용한다.
• 빌드 후 배포할 때, 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. (근소한 차이 신경X)

Function component 함수 컴포넌트의 단점

state와 라이프사이클 API의 사용이 불가능하다. ---> Hooks 기능으로 해결가능

 

---

클래스형 컴포넌트 <--> 함수 컴포넌트 변경하는 법

 

함수형 컴포넌트

함수형 컴포넌트는 props로 속성값을 전달받아 작성한다.

변수 number에 initNumber 속성값을 할당했고

return값에서 {number}로 출력하고 있다.

변수 number에 initNumber 속성값을 할당하고 {number}로 출력했다.

---

클래스형 컴포넌트

클래스형은 state를 이용하여 state값을 전달받아 작성한다. 

state에 initNumber 속성을 지정하여 속성값을 받아온 후에,

{this.state.number}로 출력한다.

state에 initNumber 속성을 지정하여 속성값을 받아온 후에, {this.state.number}로 출력한다.

 

---

 

 

예제

같은 내용을 클래스형 컴포넌트와 함수형 컴포넌트로 출력해보겠습니다.

 

App.js에 아래와 같이 코드를 작성하고 

FuncComp와 ClassComp를 각각 함수형과 클래스형으로 컴포넌트를 작성하였습니다.

import React, { Component } from 'react';
import { useState } from 'react';
import './App.css';

function App() {
  return (
    <div className='container'>
      <FuncComp initNumber={2} />
      <ClassComp initNumber={2} />
    </div>
  );
}

function FuncComp(props){...
}

class ClassComp extends Component {...
}

export default App;

 

 

함수형 컴포넌트 FuncComp 작성

함수형은 props를 이용해 App()에 작성된 FuncComp의 속성값을 받습니다.

현재 코드로는 속성 initNumber의 속성값 2를 받을 수 있고 변수 number에 할당해 주었습니다. 

number는 useState()를 이용하여 props.initNumber값을 setNumber 변경된 값이 전달되도록 하였습니다. 

setNumber는 random 버튼 클릭시 Math.random() 을 이용해 랜덤으로 난수가 출력되도록 하였고 클릭할 때 마다 새로 생성된 난수가 변수 number에 전달되어 값을 변경합니다.

return의 Number : { number } 를 이용하여 새로 생성된 난수가 Number : (난수)로 출력되도록 했습니다.

function FuncComp(props) {
  const [number, setNumber] = useState(props.initNumber);
  const [date, setDate] = useState(new Date().toString());

  return (
    <div className='container'>
      <h2>Function style Component</h2>
      <p>Number: {number}</p>
      <p>date: {date}</p>
      <input
        type='button'
        value='random'
        onClick={function () {
          setNumber(Math.random());
        }}
      />
      <input
        type='button'
        value='setdate'
        onClick={function () {
          setDate(new Date().toString());
        }}
      />
    </div>
  );
}

 

클래스형 컴포넌트 작성

함수형 컴포넌트와 다른 점은 state를 이용하여 initNumber의 속성값을 받아오고

setState함수를 이용하여 클릭할 때 마다 number에 Math.random()으로 난수가 출력되도록 하였습니다.

함수가 random버튼 클릭시에 this가 자신이 종속된 인스턴스  (ClassComp)에서 this를 받도록

return().bind(this)를 이용하였습니다.

class ClassComp extends Component {
  state = {
    number: this.props.initNumber,
    date: new Date().toString(),
  };

  render() {
    //console.log('render 실행');
    return (
      <div className='container'>
        <h2>Class style Component</h2>
        <p>Number: {this.state.number}</p>
        <p>date: {this.state.date}</p>
        <input
          type='button'
          value='random'
          onClick={function () {
            this.setState({ number: Math.random() });
          }.bind(this)}
        />
        <input
          type='button'
          value='setDate'
          onClick={function () {
            this.setState({ date: new Date().toString() });
          }.bind(this)}
        />
      </div>
    );
    }
  }

 

출력화면

 

 

참고 : 리액트를 다루는 기술, 저자 : 김민준, 생활코딩 유튜브 강의의 강의

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.