React에서 Hook을 사용하는 이유와 기본 사용법

React에서 Hook을 사용하는 이유와 기본 사용법

React에서는 함수형 컴포넌트에서 상태 관리와 생명주기 관련 작업을 할 수 있도록 Hook을 제공합니다. 클래스형 컴포넌트에 비해 코드가 간결하고 재사용성이 높기 때문에 현재는 대부분의 React 프로젝트에서 Hook이 기본적으로 사용되고 있습니다. 본 글에서는 Hook을 사용하는 이유와 기본적인 사용법, 그리고 전역 상태 관리에 활용하는 방법을 소개하겠습니다.

Hook이 필요한 이유

기존의 클래스형 컴포넌트에서는 상태(state)를 다루기 위해 다음과 같은 구조가 필요했습니다:

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

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        클릭 수: {this.state.count}
      </button>
    );
  }
}

이 방식은 this 키워드의 바인딩 문제, 생명주기 메서드 분산 등의 단점이 존재합니다. 이를 개선하고자 React 16.8부터 Hook이 도입되었습니다.

useState로 상태 관리 간소화

함수형 컴포넌트에서 상태를 관리할 수 있는 대표적인 Hook은 useState입니다:

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 수: {count}
    </button>
  );
}

이처럼 useState를 사용하면 클래스형 컴포넌트보다 훨씬 간단하게 상태를 관리할 수 있습니다.

전역 상태 관리 - useContext와 useReducer

프로젝트 규모가 커질수록 컴포넌트 간 상태 공유가 필요해집니다. 이때 useContext와 useReducer를 조합하여 전역 상태를 관리할 수 있습니다.

import React, { useContext, useState } from 'react';

const CountContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Display() {
  const { count } = useContext(CountContext);
  return <div>현재 카운트: {count}</div>;
}

이 방식은 전역 상태를 효율적으로 공유하고 관리하는 데 유용합니다. 상태 로직을 중앙 집중화할 수 있으며, 컴포넌트 간 의존성을 줄이는 데 도움이 됩니다.

결론

Hook은 React 개발에서 함수형 컴포넌트를 중심으로 효율적인 상태 관리, 사이드 이펙트 처리, 전역 상태 공유 등을 가능하게 하는 필수적인 기능입니다. 기존 클래스형 컴포넌트의 복잡한 구조를 대체하면서 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다. 따라서, 최신 React 개발 환경에서는 Hook 사용이 기본이 되어가고 있습니다.