[React] 리액트 컴포넌트(Component) - 함수형 VS 클래스형 비교

컴포넌트(Component)란?

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 레고 블럭을 조립하여 만들 듯이 앱을 조립하여 만들 수 있는 하나의 블럭을 '컴포넌트'라고 한다.

 

---

함수형과 클래스형 차이를 왜 알아야 하나?

• 클래스 스타일은 리액트의 모든 기능을 다 사용할 수 있지만, Class 라는 문법을 이해해야 하고 복잡하다.
• 함수형 스타일은 리액트의 제한된 기능만 사용할 수 있지만, 함수를 만들 수만 있다면 작성할 수 있고 단순하다.

 

 

💡

함수형 컴포넌트가 지원하지 않았던 기능

- state
- life cycle API

📢 리액트 버전 16.8부터 Hook이 등장하면서 state, life cycle API 모두 작성 가능함

 

 

작성하기 편리하고 이제 모든 기능을 지원하는 함수형 컴포넌트만 알면되지 왜 클래스형 컴포넌트를 알아야 할까?

 

리액트 팀은 클래스형 컴포넌트 지원을 끊지 않았고, 리액트 자료들은 여전히 클래스 방식으로 작성된 것이 많기 때문이다.두 가지 방식을 모두 지원한다는 것은 리액트의 장점이기도 함으로 두 방식 모두 이해할 필요가 있다.

 

---

출처 ) 유튜브 생활코딩 - React class vs function style

 

함수형 컴포넌트와 클래스형 컴포넌트로 각각 위와 같은 App을 작성해보고 차이점을 기술해 보려고 한다.

 

1. Number는 state로 관리될 것.

2. random 버튼을 누르면 Math.random으로 onClick시 숫자가 바뀔 것.

3. Number의 초기값은 2.

 

import './App.css';
import React from 'react';

function App() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}

 

• 컴포넌트 사용시 반드시 첫글자는 대문자로 작성해야 한다. (JSX 문법)
• 2개의 컴포넌트를 추가하고 Props로 initNumber를 전달했다.

 

 

 

---

✅ 함수(Function)형 컴포넌트 (권장)

• 함수형 컴포넌트는 현재 React 팀에서 권장하고 있는 컴포넌트 작성법이다.
• 초기 State와 생명주기 함수를 사용할 수 없었다.
• 16.8버전 이후 Hook, 생명주기함수 기능 추가되면서 현재는 모든 기능을 다 사용할 수 있다.

 

function FuncComp({ initNumber }) {
  const [state, setState] = React.useState(initNumber);

  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {state}</p>
      <input
        type="button"
        value="random"
        onClick={() => setState(Math.random())}
      />
    </div>
  );
}

 

 

 

✅ 클래스(Class)형 컴포넌트

• 초기부터 React의 모든 기능이 지원되었다.
• class 문법을 익혀야 작성할 수 있어 함수형에 비해 코드가 다소 복잡한 편이다.
• class 키워드로 생성, React.Component 상속 필수
• render () 메서드 사용 (함수형 컴포넌트는 자체적으로 render 발생)
• props, state, 생명주기 메서드 등 을 사용할 때 this를 참조하여 사용한다.

 

class ClassComp extends React.Component {
  state = {
    number: this.props.initNumber,
  };
  render() {
    return (
      <div className="container">
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <input
          type="button"
          value="random"
          onClick={function () {
            this.setState({ number: Math.random() });
          }.bind(this)}
        />
      </div>
    );
  }
}

 

 

 

 

 

 

🔔 함수형 컴포넌트를 권장하는 이유

1. 직관적인 코드

함수(function)선언과 화살표 함수까지 지원하여 개발자들에게 익숙한 언어로 좀더 직관적이다.

 

2. 메모리 자원 효율

클래스형 컴포넌트에 비해 코드 길이가 줄어 비교적 메모리 자원을 적게 사용한다.

 

3. Hooks, useEffect

Hook의 useState를 사용해 state관리가 가능하고 useEffect를 사용해 LifeCycle을 관리할 수 있다.