[React] class와 hooks 비교하기

나는 React를 처음 배울 때부터 useState나 useEffect 등의 Hooks을 사용하여 함수 컴포넌트를 작성하는 것부터 배웠지만 React에서 Hooks를 사용한 함수형 프로그래밍이 가능하게 된 것은 2019년 React 버전 16.8부터로 그렇게 오래되지 않았다.

 

 

이 Hooks의 역사는 recompose라는 라이브러리에서 시작되었다.

 

recompose 깃헙 레포지토리는 현재 읽기 전용으로 변경되었지만, 아래 README 내용을 보면 우리가 알고있는 useState와 비슷한 형태로 사용이 가능다는 것을 알 수 있다.

 

이미지 출처 : https://github.com/acdlite/recompose

 

이 recompse라는 라이브러리가 리액트 팀에 인수되었고, 리액트에서 Hooks가 릴리즈된 것이다.

 

 

 

 

먼저, 간단한 카운터 예제를 통해 class를 사용한 코드과 hooks를 사용한 코드의 차이점을 살펴보자.

 

class로 간단한 카운터 구현하기

class App extends Component {
  state = {
    count: 0
  };
  modify = (n) => {
    this.setState({
      count: n
    });
  };
  render() {
    const { count } = this.state;
    return (
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count+1)}>Increment</button>
      </>
    )
  }
}

 

 

hook으로 간단한 카운터 구현하기

import { useState } from "react";

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

  return (
    <>
      {count}
      <button onClick={() => setCount(count+1)}>Increment</button>
    </>
  );
}

 

 

위의 예제 코드를 보면 hooks를 사용할 때 코드가 눈에 띄게 간결해지는 것을 볼 수 있다.

 

물론, hooks를 사용한다고해서 모든 코드가 간결해지는 것은 아닐 수도 있고, 코드가 간결하다고만 해서 좋은 코드라고 단정지을 수는 없다.

상황이나 개인의 선호도에 따라 class와 hooks 중 어떤 방법으로 코드를 작성할지 아니면 두 방식을 혼합해서 코드를 작성할지 고려해보는 것이 좋다.

 

 

 

class를 사용할 때와 hooks를 사용할 때 각각의 장단점을 아래와 같다. (chat gpt에게 물어보았다 🤖)

 

 

class를 사용하여 클래스 컴포넌트는 작성한다면,

 

장점

-  객체 지향 프로그래밍 경험이 있는 개발자의 경우 class 컴포넌트를 이해하고 작업하기 쉽다.

-  componentDidMount, componentDidUpdate와 같은 기본으로 제공하는 수명 주기 메서드를 통해 수명 주기의 여러 단계에서 컴포넌트의 동작을 제어할 수 있다.

-  컴포넌트 로직을 다른 메서드로 분리하여 코드를 더 쉽게 구성하고 관리할 수 있다.

 

단점

-  class 컴포넌트에는 생성자 함수 및 이벤트 핸들러의 수동 바인딩과 같은 많은 상용구 코드가 필요하다.

-  애플리케이션이 커짐에 따라 상태를 관리하고 데이터의 흐름을 이해하는 것이 복잡해질 수 있다. (this 키워드를 사용하고 컴포넌트 인스턴스 범위를 관리하는 것이 어려울 수 있다)

-  클래스 컴포넌트는 동작을 공유하기 위해 상속에 의존하는 경우가 많기 때문에 함수 컴포넌트에 비해 재사용성이 낮다.

 

 

hooks를 사용하여 함수 컴포넌트를 작성한다면,

 

장점

-  class를 사용할 때 보다 간단하고 간결한 코드를 작성할 수 있다. (상용구 코드의 양을 줄일 수 있다)

-  로직을 작고 재사용 가능한 함수로 분리하여, 더욱 모듈화되고 테스트 가능한 코드로 작성할 수 있다.

-  메모이제이션 및 재렌더링에 대한 세분화된 제어와 같은 최적화를 제공하여 클래스 컴포넌트 보다 나은 성능을 제공한다.

 

단점

-  class에 익숙한 개발자에게는 hooks라는 새로운 방법을 도입하는 것에 대한 이해도가 요구된다.

-  hooks는 useEffect, useMemo, useCallback과 같은 수명 주기 메서드의 하위 집합만 제공한다.

-  hooks는 React16.8에서 도입되었으므로 hooks로 마이그레이션 되지 않은 라이브러리를 사용하는 경우 호환성 문제가 발생할 수 있다.

 

 

 

 

나는 아직 class를 사용하여 클래스 컴포넌트로 리액트를 작성해본 적은 없어서 class와 hooks를 사용하는데 어떤 차이가 있는지 직접 체감해보지는 못했다.

 

그래서 노마드코더에서 제공하는 ReactJS로 영화 웹 서비스 만들기 강의를 들어보려고 한다. (어쩐지 노마드코더 광고같은 흐름이 되었지만..ㅋㅋㅋ)

 

위 강의의 목차를 보면, hooks를 사용하는 최신 강의와 class를 사용하는 예전 강의가 모두 오픈되어 있어서 같은 서비스를 각각 class와 hooks를 사용하는 방법으로 개발해보며 둘의 차이를 비교해볼 수 있을 것 같다.

 

 

 

 

참고자료

🔗 [노마드코더]  리액트 Hooks 10분만에 사용법 배우기

🔗 [reactjs.org]  Hook의 개요

🔗 [react.dev]  Built-in React Hooks