[react] 함수형 컴포넌트와 클래스형 컴포넌트의 차이

📌React 컴포넌트(Component)의 역할

리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다.

컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서  화면에 필요한 UI형태로 띄워주는 역할을 한다. 

리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다.

 

리액트에서는 컴포넌트는 선언 방식에 따라서

함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다.

 

 

1️⃣함수형(Function) 컴포넌트

자바스크립트의 함수형태로 표현되는 컴포넌트이다.

return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다.

function about() {
  return (
      <div>
        <h2>Hello React</h2>
      </div>
  )
}

export default about;

자바스크립트에 익숙한 개발자라면 확실히 직관적이며,

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

큰 차이는 아니지만, 빌드 후 배포할 때도 함수형 컴포넌트가 파일크기도 더 작아진다.

 

 

2️⃣클래스형(Class) 컴포넌트

import React, {Component} from 'react';

class about extends Component {
    render() {
        return <div> Hello, React</div>
    }
}

export default about

 

위와 동일한 동작을 하는 코드를 클래스형 컴포넌트 형태로 변경시켰다.

클래스형 컴포넌트를 사용하려면 React에서 Component를 상속해서 만들어줘야 한다.

 

클래스형 컴포넌트에서는 render라는 함수를 이용해서 JSX를 반환시켜 줘야 한다.

클래스형 컴포넌트에서는 함수형 컴포넌트와는 다르게 lifecycle과 state를 사용할 수 있다.

 

그래서 컴포넌트 내에서 상태를 관리하고 업데이트를 할 수 있다는 장점이 있었으나.

리액트 업데이트 이후 Hooks이라는 기능이 도입되면서 함수형에서도 

비슷한 형태로 작업이 가능해졌다고 한다.