리액트 컴포넌트, 아직도 클래스형 쓰는 사람? 이 글 읽고 손절하자!

리액트 컴포넌트

리액트를 사용할 때 컴포넌트를 작성하는 두 가지 방법이 있어. 바로 클래스형과 함수형 방식이지. 요즘 리액트 공식 문서에서는 클래스형 컴포넌트는 거의 안 쓰라고 권장해. 왜 그런지 같이 알아보자!

함수형 컴포넌트 vs. 클래스형 컴포넌트

리액트 프로젝트를 새로 만들면 기본적으로 함수형 컴포넌트로 작성되어 있어. 이 코드를 클래스형 컴포넌트로 바꿔보면 어떤 차이가 있는지 볼까?

함수형 컴포넌트

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;

 

클래스형 컴포넌트

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

class App extends Component {
  constructor(props) {
    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;

비교해보면, 함수형 컴포넌트 코드가 훨씬 간단하고 직관적이야! 클래스형 컴포넌트는 코드가 길고 복잡해 보여.

 

• 코드 길이: 함수형 컴포넌트가 훨씬 짧고 간결해.
• 상태 관리: 함수형에서는 useState 훅을 사용하고, 클래스형에서는 this.state와 this.setState를 사용해. 함수형이 더 직관적이야.
• 생명주기 메서드: 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기 메서드를 사용해. 함수형 컴포넌트에서는 useEffect 하나로 처리할 수 있어.

 

 

이제 함수형 컴포넌트만 쓰자!

함수형 컴포넌트는 리액트 16.8 버전에 '리액트 훅'이 추가되면서 게임 체인저가 되었어. 이전에는 함수형 컴포넌트를 사용하는 게 불편했지만, 이제는 훅 덕분에 클래스 컴포넌트를 사용할 이유가 없어졌지.

 

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

• useState
• useEffect
• useContext
• useReducer
• useRef

이런 훅들 덕분에 함수형 컴포넌트를 사용하는 게 훨씬 쉬워졌어. 앞으로 하나씩 배워볼 거니까 걱정하지 마!