Class component vs Functional component

글의 시작

오늘 다루는 주제는 내가 실제 면접 때 질문을 받아봤던 내용이다. 

요즘에는 함수형 컴포넌트가 사용하기 편해서 클래스형 컴포넌트 보다 더 많이 쓰는 추세라고 한다.

나는 프로젝트 때 함수형 컴포넌트만 다뤄봤다. 그러다 문득 단순한 고민에 빠졌다. "왜 함수형 컴포넌트를 쓰지?"

면접을 준비하고 "리액트를 다루는 기술"이라는 책을 읽게 되면서 클래스형 컴포넌트의 존재에 대해서 처음 알게 됐다.

"최소 내가 사용하는 도구의 장단점이나 사용 목적에 대해서는 알아야하지 않을까?"라는 마인드라서,

이번 글을 통해 차이점을 분석하는 시간을 가져보려고 한다.   

 

 

Class component vs Functional component

React Component 선언 방식은 크게 두 가지로 나뉜다. 하나는 클래스형 컴포넌트 또 다른 하나는 함수형 컴포넌트이다. 

클래스형 컴포넌트

state 기능 및 LifeCycle API를 사용할 수 있다.

임의 메서드를 정의할 수 있다. 

render 함수가 꼭 있어야 한다. 

 

함수형 컴포넌트

리액트 16.8 버전 이후 제공되는 Hook으로 인해서 state와 LifeCycle API의 사용이 가능하다.

클래스형 컴포넌트보다 선언하기 훨씬 편하다.

메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.

프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.(근데 사실상 성능과 파일 크기 면에서 크게 차이가 없다고 한다.)

 

선언방식의 차이점

클래스형 컴포넌트랑 함수형 컴포넌트는 선언 방식이 다르다. 

 

클래스형 컴포넌트

class 키워드가 필요하며, Component를 상속받아야 한다. 화면에 표시하기 위해서는 위에서도 언급했듯이 render 함수가 반드시 필요하다. 

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

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

export default App;

함수형 컴포넌트

클래스형 컴포넌트와 다르게 render 함수가 필요 없고, Component를 상속받지 않아도 된다. 

import React from "react";

const App = () => {
  const name = "react"
  return <div className="react">{name}</div>
}

export default App;

 

State 사용 차이

클래스형 컴포넌트

constructor안에서 this.state를 통해 초깃값을 설정 가능하며, constructor 없이도 초깃값을 설정할 수 있다. 클래스형 컴포넌트의 state는 객체 형식이다. 

constructor(props) {
    super(props);
    
    this.state = {
    	name: "react",
        items: []
    };
}

class App extends Component {
	state = {
    	name: "react",
        items: []
    }
}

this.setState 함수로 state의 값을 변경할 수 있다.

onClick={() => {
    this.setState({ price: price + 100 });
}}

 

함수형 컴포넌트

함수형 컴포넌트에서는 useState로 state를 핸들링한다. useState함수를 호출하면 배열이 반환되는데 첫 번째 원소는 state 두 번째 원소는 setState의 역할을 하는 즉, state를 변경해주는 함수이며, useState의 파라미터는 초깃값이다. 

const App = () => {
   const [name, setName] = useState("react");
   
   const onButtonClick = {() => {
      setName("react2");
   }}; 
}

 

Props 사용 차이

클래스형 컴포넌트

this.props로 불러온다

class App extends Component {
   render() {
      const {name, age} = this.props;
      return (
         <div>
           안녕하세요 저는 {name}이고, {age}살입니다.
      )
   }
}

함수형 컴포넌트

render 함수의 파라미터로 props를 전달 받아서 사용한다. 

const App = (props) => {
  return (
    <div>
      안녕하세요 저는 {props.name}이고, {props.age}살입니다.
    </div>
  );
};

export default App;

 

LifeCycle 차이

컴포넌트는 생성(mount) => 업데이트(update) => 제거의 생명주기를 갖는다. 불필요한 업데이트를 방지하기 위해서다. 

위에서도 언급했듯이 클래스형 컴포넌트에서는 LifeCycle API를 사용하며, 함수형 컴포넌트에서는 Hook을 사용한다. 

 

이벤트 핸들링

클래스형 컴포넌트

함수 선언시 arrow로 바로 선언이 가능하며, 적용하기 위해서는 this를 붙여야 한다.

handleChange = (e) => {...}
 
render() {
  return (
    <>
      <input type= "text" onChange= {this.handleChange}/>
    </>
  )
 }
}

함수형 컴포넌트

const 함수 형태로 선언해야 하며, this가 필요없다.

const handleChange = () => { ... }

return (
  <>
    <input type= "text" onChange= {this.handleChange}/>
  </>
)

 

 

 

글의 마무리

현재 리액트 공식 메뉴얼에는 함수형 컴포넌트를 사용하도록 권장하고 있다. 리액트 16.8버전부터는 Hook을 지원하여, 함수형 컴포넌트의 단점이던 state와 라이프사이클 API의 사용이 불가능하다는 단점을 보완했다. 리액트의 state와 생명주기를 이해하기 위한 차원, 유지보수를 진행해야 할 상황이 빈번하게 발생할 수 있다는 점에서 클래스형 컴포넌트를 숙지할 필요가 있어 보인다.