[리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?)

 

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

3장 컴포넌트

• 3.1 클래스형 컴포넌트

 

---

 

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다.

 

리액트에서 컴포넌트는 두가지 방식으로 선언할 수 있는데 클래스형태로 컴포넌트를 선언하는 방식과 함수형태로 컴포넌트를 선언하는 방식이 있다.

 

1. 클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'React';
    return (
      <div>
        <h1>{name}</h1>;
        <p>A JavaScript library for building user interfaces</p>;
      </div>
    );
  }
}

export default App;

• 리액트에서 제공하는 Component라는 클래스를 extends 즉 상속한다
• render 함수가 꼭 있어야 하고 그 안에 JSX문법으로 리턴하고 싶은 코드를 적는다
• 컴포넌트의 상태를 정의 해주는 state 기능이 있다. 
• 컴포넌트의 상태에 따라 함수를 실행하는 라이프사이클 메소드기능이 있다 ( 컴포넌트의 3가지 상태: 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount) )

1.1 클래스형 컴포넌트에서 아래의 두 코드는 같다

import React from 'react';

class App extends React.Component {
  ...
}

import React, { Component } from 'react';

class App extends Component {
  ...
}

 

2. 함수형 컴포넌트

import React from 'react';

function App() {
  const name = 'React'
  return (
    <div>
      <h1>{name}</h1>;
      <p>A JavaScript library for building user interfaces</p>;
    </div>
  );
}

export default App;

• render 함수 없이 리턴할 수 있다
• 함수형 컴포넌트 선언하는 방법 즉 코드작성이 쉽다
• 클래스형 컴포넌트보다 메모리를 적게 사용한다
• state 기능과 라이프사이클 기능이 탑재되지는 않지만 리액트 v16.8부터 Hooks로 대체사용할 수 있다

2.1 함수형 컴포넌트에서 아래의 두 코드는 같다

함수 선언식으로 컴포넌트 선언

import React from 'react';

function App() {
  ...
};

export default App;

함수 표현식으로 컴포넌트 선언

import React from 'react';

const App = () => {
  ...
};

export default App;

 

export default <컴포넌트 이름> 더 간단하게 쓰기

component.js

export default <컴포넌트 이름>에서 default를 생략하고 컴포넌트 이름에 중괄호를 넣어주었다

import React from 'react';

function Component() {
  ...
}

export { Component };

App.js

export default <컴포넌트 이름>에서 default를 생략하고 컴포넌트 이름에 중괄호를 넣어주었다

import React from 'react';
import { Component } from './Component';

function App() {
  ...
}

export default App;

 

3. 클래스형 컴포넌트와 함수형 컴포넌트중에 뭘써야할까?

정답은 함수형 컴포넌트다. 리액트 16.8버전에서 Hooks라는 기능이 생기기 전에는 컴포넌트가 상태가 있고 상태에 따라 컴포넌트가 주기적으로 업데이트되야 한다면 클래스형 컴포넌트를 사용하고 정적인 웹사이트를 만들고 싶으면 함수형 컴포넌트를 사용했다.

 

하지만 Hooks 기능이 도입되면서 함수형컴포넌트가 state기능과 라이프사이클 메소드를 사용할 수 있게 되면서 그럴 필요가 없어졌다. 클래스형 컴포넌트와 함수형 컴포넌트 모두 state기능과 라이프사이클 메소드를 사용할 수 있게 되면서 더 쉬운 함수형 컴포넌트를 많이 사용하는 추세이다. 클래스형 컴포넌트는 객체 지향형태라 이해하기가 어렵고 멤버변수에 접근할때 항상 this를 붙여야한다는 단점이 있다. 물론 프로젝트마다 더 효율적인 컴포넌트는 다르겠지만 리액트 공식 매뉴얼에서는 함수형 컴포넌트를 권장한다.

 

그러면 함수형 컴포넌트 하나만 배우면 되지않을까? 굳이 클래스형 컴포넌트를 배울필요가 있을까? 내가 생각했을때 클래스형 컴포넌트를 배워야하는 이유는 2가지다.

1. 회사에서 예전부터 리액틀르 사용한 경우 예전에 개발한 프로젝트가 클래스형 컴포넌트를 쓸 수도 있다 (혹은 오래된 코드를 모던한 개발을 위해 클래스형 컴포넌트를  함수형 컴포넌트로 바꾸는 작업을 할 수도 있다)
2. 구글에서 리액트 관련 예시코드를 찾아봤을때 클래스형 컴포넌트로 되어있는 곳이 많다 (스택 오버플로우 등)