[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

 

• 리액트 컴포넌트
  • 클래스형 컴포넌트와 함수형 컴포넌트
  • 이제 함수형 컴포넌트만 쓰세요

---

- 리액트 컴포넌트

 

리액트 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있다.

 

아직까지 두 방식 모두 지원하고 있지만,

공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장한다.

 

따라서 되도록 클래스형 컴포넌트를 배우지 않아도 되지만,

레거시(Legacy) 유지 보수 차원에서 간단하게 살펴보고자 한다.

---

- 클래스형 컴포넌트와 함수형 컴포넌트

 

리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있다.

 

해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있다.

 

나는 TypeScript를 사용하여 앞으로도 .tsx 파일을 작성할 것이고,

아래의 예시 코드에 있는 useState()는 차후에 글을 작성할 예정이다.

 

 

- 클래스형 컴포넌트

import { Component } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

interface AppState {
  count: number;
}

class App extends Component<
  React.Dispatch<React.SetStateAction<AppState>>,
  AppState
> {
  constructor(props: React.Dispatch<React.SetStateAction<AppState>>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    const { count } = this.state;
    return (
      <>
        <div>
          <a
            href="https://vitejs.dev"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
        </div>
        <h1>Vite + React</h1>
        <div className="card">
          <button onClick={() => this.setState({ count: count + 1 })}>
            count is {count}
          </button>
          <p>
            Edit <code>src/App.tsx</code> and save to test HMR
          </p>
        </div>
        <p className="read-the-docs">
          Click on the Vite and React logos to learn more
        </p>
      </>
    );
  }
}

export default App;

 

- 함수형 컴포넌트

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App;

 

클래스형 컴포넌트와 함수형 컴포넌트를 비교해보자.

 

어떤게 더 간단해 보이나요..?

 

함수형 컴포넌트의 코드가 훨씬 더 간단하고 직관적임을 알 수 있다.

---

- 이제 함수형 컴포넌트만 쓰세요

 

함수형 컴포넌트는 React 16.8 버전에 추가된 'React Hook'으로 인해 사용성의 대변화를 겪었다.

 

쉽게 말하면 16.8 이전 버전에서는 함수형 컴포넌트를 사용하는게 불편했지만,

16.8 부터 새롭게 추가된 '리액트 훅'으로 인해서

더 이상 클래스형 컴포넌트를 사용하는 게 비효율적인 시대가 되었다.

 

대표적인 리액트 훅에는 다음과 같은 것들이 있다.

• useState
• useEffect
• useContext
• useReducer
• useRef

이런 리액트 훅은 앞으로 하나씩 글을 작성하고자 한다.

---

참고 강의: https://www.sucoding.kr/