[React] React Hook이란?

React Hook은 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 예전에는 클래스형 컴포넌트에서만 이런 기능들을 사용할 수 있었는데, Hook 덕분에 함수형 컴포넌트에서도 이를 사용할 수 있게 되었습니다.

왜 Hook을 사용할까요?

함수형 컴포넌트는 간결하고 이해하기 쉽다는 장점이 있습니다. 하지만 상태를 관리하거나 특정 시점에 작업을 수행하고 싶을 때는 클래스형 컴포넌트를 사용해야 했습니다. Hook을 사용하면 이런 제약 없이 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있습니다.

Hook의 종류

1. useState

useState 는 상태를 관리할 때 사용하는 Hook입니다. 상태란 쉽게 말해 컴포넌트에서 기억하고 있어야 할 값입니다. 예를 들어, 버튼을 클릭한 횟수나 입력 폼에 입력된 값을 상태라고 할 수 있습니다.

import React, { useState } from 'react';

function Example() {
  // useState(0)은 상태의 초기값을 0으로 설정한다는 뜻입니다.
  const [count, setCount] = useState(0);

  // 버튼을 클릭할 때마다 count를 1씩 증가시키는 함수
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

이 예제에서 useState는 두 가지를 반환합니다:

현재 상태 값(count)
상태를 업데이트하는 함수(setCount)

useState의 '0'은 초기 상태 값을 의미합니다. 버튼을 클릭하면 setCount 함수가 호출되어 count 값을 업데이트합니다.

2. useEffect

useEffect는 컴포넌트가 렌더링된 이후에 실행되는 작업을 정의할 때 사용합니다. 예를 들어, API에서 데이터를 가져오거나, 구독(subscription)을 설정하거나, DOM을 직접 조작할 때 사용합니다.

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

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

  // count 값이 변경될 때마다 이 함수가 실행됩니다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

이 예제에서 useEffect는 count 값이 변경될 때마다 문서의 제목을 업데이트합니다. 두 번째 인자로 전달된 배열 [count]는 의존성 배열이라고 하며, 배열 안의 값이 변경될 때마다 useEffect가 실행됩니다. 만약 이 배열을 빈 배열 '[]'로 두면, 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

3. useContext

useContext는 Context API와 함께 사용하여 전역 상태를 쉽게 관리할 수 있게 해줍니다. Context는 여러 컴포넌트에 걸쳐 전역적으로 데이터를 공유할 때 유용합니다.

import React, { useContext } from 'react';

// 전역적으로 사용할 Context를 생성합니다.
const MyContext = React.createContext();

function Example() {
  // useContext를 사용하여 MyContext의 값을 받아옵니다.
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

function App() {
  return (
    // Provider를 사용하여 하위 컴포넌트에 값을 전달합니다.
    <MyContext.Provider value="Hello World">
      <Example />
    </MyContext.Provider>
  );
}

이 예제에서 Mycontext를 생성하고, App 컴포넌트에서 Provider를 사용하여 값을 전달합니다. Example 컴포넌트에서는useContext를 사용하여 이 값을 받아와서 사용할 수 있습니다.

4. useReducer

useReducer는 상태와 그 상태를 변경하는 로직을 더 복잡하게 관리해야 할 때 사용합니다. 이는 Redux와 유사한 패턴을 제공합니다.

import React, { useReducer } from 'react';

// 상태를 변경하는 로직을 정의한 reducer 함수
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  // useReducer는 현재 상태와 디스패치 함수를 반환합니다.
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

이 예제에서 useReducer는 reducer 함수와 초기 상태를 인자로 받아 현재 상태 값(state)과 상태를 업데이트하는 함수(dispatch)를 반환합니다. dispatch 함수는 액션 객체를 인자로 받아 reducer 함수에 따라 상태를 업데이트합니다.

5. 커스텀 Hook

커스텀 Hook은 재사용 가능한 로직을 추출하여 별도의 함수로 만드는 것입니다. 이름은 반드시 "use"로 시작해야 합니다.

import { useState, useEffect } from 'react';

// 데이터를 fetching하는 커스텀 Hook
function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

function Example() {
  const data = useFetch('https://api.example.com/data');

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

이 예제에서 userFetch 커스텀 Hook은 데이터를 fetching하는 로직을 담고 있으며, 이를 Example 컴포넌트에서 사용하여 데이터를 쉽게 가져올 수 있습니다.

React Hook은 함수형 컴포넌트에서도 상태와 생명주기 메서드를 사용할 수 있게 해주는 강력한 도구입니다. useState, useEffect, useContext, useReducer, 커스텀 Hook 등 다양한 Hook을 통해 더 간결하고 직관적인 코드를 작성할 수 있습니다. 처음에는 조금 낯설 수 있지만, 익숙해지면 React 개발이 훨씬 더 쉬워질 것입니다.