리엑트 함수형 컴포넌트와 클래스형 컴포넌트 알아보기

소개

React의 Component를 선언하는 방식은 두가지로 나뉜다. 초기에는 클래스형 컴포넌트로 리엑트를 작성하였으나 React V16.8에서 훅이 등장하면서 함수형 컴포넌트가 대두되었고 이후로 많은 사랑을 받아 현재는 대다수가 함수형 컴포넌트로 리엑트를 사용한다. 이 글에서 클래스 컴포넌트와 함수형 컴포넌트의 개념을 비교하면서 알아보려고 한다.

선언방식의 차이

클래스형 컴포넌트 선언

import React from 'react';

class App extends React.component {
	render(){
    	return <div> Hello World! </div>
    }
}

클래스형 컴포넌트는 이름 앞에 class 키워드를 붙이고 React에서 Component를 상속 받아서 사용해야 한다. 또한 render()가 반드시 필요하다.

함수형 컴포넌트 선언

function App = () => {
  return <div> Hello World! </div>
}

export default App

함수형 컴포넌트는 클래스형 컴포넌트와 비교했을 때 코드가 간결하다. 또한 render()함수를 사용하지 않아도 되며 Component를 상속받지 않아도 된다. 가장 큰 장점은 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다는 점이다.

State의 차이

state는 컴포넌트에서 지속적으로 변경이 일어나는 데이터 또는 정보를 담는 데 사용하는 자바스크립트 내장 객체이다. state가 변경되면 컴포넌트는 리렌더링 된다.

클래스형 컴포넌트에서 state활용

import React from 'react';

class App extends React.component {
  constructor(props){
  	super(props)
    this.state = {
      num: 1
    }
  }
  handleIncrease(){
  	this.setState(state => {num : state.num +1})
  }
  render(){
    return (
    	<div>
      		<span>{this.state.num}</span>
        	<button onClick={this.handleIncrease}>+1</button>
      	</div>
    )
  }
}

constructor 안에서 this.state를 통해 초기 state를 정의할 수 있다. state의 값을 변경하려면 this.setState를 이용하여 변경해야한다. state는 객체의 형태를 유지한다. 또한 이벤트를 원하는 요소에 적용할 때에는 this.을 꼭 붙여야한다.

import React, {useState} from 'react'

function App = () => {
  const [num, setNum] = useState(1)
  const handleIncrease = () => {
  	setNum(num=>num+1)
  }
  return (
    	<div>
      		<span>{num}</span>
        	<button onClick={handleIncrease}>+1</button>
      	</div>
    )
}

export default App

함수형 컴포넌트에서는 useState 리엑트 훅으로 state를 사용하는데 useState는 state값과 state값을 변경해주는 함수 두 가지를 반환한다. 더이상 이벤트를 원하는 요소에 적용할 때나 state를 지정할 때 this키워드가 필요가 없다.

Props의 차이

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체이다. 컴포넌트에 속성으로 설정을 하며 읽기 전용 값이다. props가 업데이트 되면 리렌더링 된다.

클래스형 컴포넌트 prop활용

import React from 'react';

class App extends React.component {
  render(){
    const {greeting} = this.props;
    return (
    	<div>
      		<span>{greeting}</span>
      	</div>
    )
  }
}

this.props를 통해 상위 컴포넌트에게서 받은 props를 불러올 수 있다.

함수형 컴포넌트 props활용

function App = ({greeting}) => {

  return (
    	<div>
      		<span>{greeting}</span>
      	</div>
    )
}

export default App

따로 props를 불러오지 않고 함수의 인자값으로 받아서 바로 활용이 가능하다.

생명주기 메서드(life cycle method)

라이프 사이클(life cycle)이란?

생명주기라고 부르며 생성되고 업데이트되고 사라지는 일련의 과정을 일컫는다. 클래스형 컴포넌트에는 생명주기 메소드를 제공하는데 이를 통해 컴포넌트의 생명주기에 따라 원하는 로직을 작성할 수 있다. 생명주기 메소드의 동작 과정을 설명하는 아래의 그림을 보자

첫번째 렌더링이 마치고 나면 ComponentDidMount 메소드가 최초 한번 호출이 된다. props나 state의 값이 업데이트 되면 될 때마다 componentDidUpdate함수가 실행이 된다. 컴포넌트가 화면에서 사라질 때 즉 생명주기가 종료될 때 componentWillUnmount가 실행이 된다.

함수형 컴포넌트에는 따로 라이프 사이클 메소드가 제공되지 않으나 useEffect hook을 이용하여 흉내 낼 수 있다.

마무리

지금까지 클래스형 컴포넌트와 함수형 컴포넌트를 도드라지는 특징들의 차이를 통해 알아보았다. 현재는 리엑트 공식문서에도 컴포넌트를 새로 작성할 때 함수형 컴포넌트를 사용하라고 권장하고 있으며 실제로도 많은 리엑트 사용자들이 함수형 컴포넌트를 사용하여 컴포넌트를 작성한다.