React만 사용하는 Hooks, 왜 사용하는지 알고 있니?

읽기 전에

본 글은 React Hooks의 개념을 깊게 공부하는 Frontend 초보 개발자를 위한 글입니다.

"react": "^18",

Hooks의 도입

React 의 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트 두 종류가 있습니다.

React Hooks이 도입되기 전 React v16.8 이전에는 함수 컴포넌트는 코드가 매우 간결하고 직관적이라는 장점이 있었습니다. 하지만 상태관리를 위한 state를 사용할 수 없었고 생명주기 메서드 등을 사용할 수 없어습니다. 그래서 Hooks이 도입되기 전 대부분 기능은 클래스 컴포넌트에서 구현을 했습니다.

// 클래스 컴포넌트 예시
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default Counter;

2018년, React v16.8에 Hooks이 도입이 되며 함수형 컴포넌트의 단점을 모두 박살냅니다! Hooks을 통해 함수 컴포넌트에서 상태와 side-effects를 쉽게 관리할 수 있게 됐습니다.

Hooks 이란?

Hooks은 함수 컴포넌트에서 상태나 생명주기 관련 기능을 사용할 수 있게 해주는 도구입니다. 또한 Hooks는 성능 최적화에도 큰 도움이 됩니다. React는 컴포넌트가 다시 렌더링될 때마다 모든 로직이 다시 실행되지만, useMemo, useCallback 같은 훅을 사용하면 불필요한 연산을 방지하고 컴포넌트 성능을 최적화할 수 있습니다.

Hooks 종류

React 에서 기본적으로 제공하는 내장 Hooks이 있고 React 라이브러리에서 제공하는 Hooks도 있고 본인이 직접 만드는 Custom Hooks도 있습니다.

예를들어 React 내장 Hooks에는 상태관리를 도와주는 useState, side-effect를 처리하는 useEffect, 성능 최적화를 도와주는 useMemo, useCallback 등이 있습니다.
그리고 TanStack-Query에서 제공하는 useQuery, useInfiniteQuery등이 있습니다.

왜 React는 Hooks을 사용하는 걸까?

사실 Hooks을 사용하는건 React밖에 없습니다. Vue.js도 사용하지 않고 PHP, Angular.js, Svelte도 Hooks를 사용하지 않습니다.

그럼 React 만 Hooks를 사용하는 이유는 뭘까요?

그 이유는 React 의 특정 구조때문입니다! React 의 특징은 컴포넌트 기반의 아키텍처와 Virtual DOM을 통해 UI를 관리한다는 점이 있습니다.

이를 통해 상태 변화를 추적하고, UI를 최적화 하는 과정에서 Hooks이 필수적인 역할을 수행하게 됩니다.

예를들어 Svelte 는 Virtual DOM을 사용하지 않고 반응형 시스템을 통해 상태 변경을 추적하고, 자동으로 DOM을 업데이트 됩니다.

그게 무슨말이냐? React 에서처럼 useState나 useEffect를 사용할 필요가 없습니다.

하지만 React 에서는 상태가 변할 때마다 전체 UI를 재렌더링 하지 않고, Virtual DOM을 통해 변화된 부분만 효율적으로 업데이트합니다. 그렇게 변화시킬 부분만 업데이트를 하기 위해서는 useState나 useEffect로 변화 시킬 범위(의존성)를 지정해 줘야 합니다.

이러한 효율을 내기 위해서는 React 는 귀찮은 Hooks을 사용하는겁니다.

마치며

사실 저는 React 를 사용하며 정말 Hooks을 많이 사용했습니다. 하지만 프론트엔드의 다른 프레임워크를 사용해 보며 Hooks은 React 에만 있다는 사실을 알았습니다. 그래서 "대체 Hooks이 뭐길래 사용하는걸까", "왜 변수를 let으로 선언하지 않고 useState로 선언 해야하는걸까", 의문을 가진적이 있지만 제대로 공부를 해보지 않은것 같습니다.

이번 기회에 Hooks이 어떤건지, 왜 사용해야하는지 정확하게 이해한것 같습니다. 뿐만 아니라 React 가 왜 훅을 필요로 하고, 다른 프레임워크들과 어떤 차별점이 있는지도 더 잘 알게 되었습니다.

공부를 하면서 느낀 것은, 당연하게 사용해오던 개념들에 대해 의문을 갖고 그 답을 찾아가는 과정이 정말 중요한 것 같습니다... 매번 이런 과정을 통해 더 깊이 있는 이해와 발전을 이룰 수 있다는 것을 오늘도 느낍니다.