[React]클래스와 컴포넌트의 방식의 차이

React 클래스와 컴포넌트의 방식의 차이에 대해서 알아보겠습니다

리액트를 사용하여 프론트 개발을 할 때

두 가지 방법으로 컴포넌트를 선언할 수가 있습니다

과거에는 클래스형 컴포넌트를 주로 사용했지만

2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서

현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있습니다

어떤 것이 유용한지는 상황에 따라 다르므로 두 가지 방법에 대해 모두 다 잘 알고 있으며

필요한 상황에 맞게 사용하는 것이 중요하므로

각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 해야겠습니다

함수형 컴포넌트

import React from 'react'; 

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

클래스형 컴포넌트

import React, { Component } from 'react'; 

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

클래스형 컴포넌트에는 render() 함수가 꼭 필요합니다

Props 를 조회 하고 싶으면 this.props 로 조회 하면 됩니다


기본적으로 동일한 기능을 수행하지만

차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며

임의 메서드를 정의할 수 있다는 점입니다

그리고 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다

또한 과거의 prototype을 이용해서 구현하던 클래스 문법을

ES6 문법 부터는 class 문법을 사용하여 구현할 수도 있습니다


리액트 훅이 등장하면서 함수형 컴포넌트를 더 많이 사용하는 추세가 되었지만

오래된 리액트 코드의 경우 클래스형 컴포넌트로 이루어진 경우가 더 많으므로

두 가지 모두 다 잘 알고 있어야 리액트로 개발을 할 때 어려움을 겪지 않을 것입니다

클래스형 :
state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다.

함수형 :
state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.

함수형이 클래스보다 후에 나왔기 때문에 더 개선된 점들이 많이 나온 것은 사실이지만

과거에 클래스형을 사용해 코딩한 부분들의 유지보수를 위해서 알아둘 필요가 있습니다

useState 는 상태값을 관리하기 위한 react hook 함수 입니다

hook 이 나오기 이전에는 class 기반으로 구현해야 했습니다

react hooks 이 나오고 나서 부터 함수형 function 을 이용하여 상태값을 useState 함수로 관리가 가능해 졌습니다.

const [countDown, setCountdown] = useState(props.countDown);