React Hooks를 사용한 함수형 컴포넌트 개발 방법

요약: 이 글에서는 React Hooks를 사용하여 함수형 컴포넌트를 개발하는 방법을 소개합니다. 상태 관리와 생명주기 메소드를 함수형 컴포넌트에서 쉽게 다루어보세요.

함수형 컴포넌트와 React Hooks

React 16.8 이후로, React Hooks 라는 기능이 도입되어 함수형 컴포넌트에서도 상태 관리와 생명주기 메소드를 쉽게 다룰 수 있게 되었습니다. Hooks를 사용하면 클래스 컴포넌트를 사용하지 않고도 모든 기능을 구현할 수 있어 더 간결하고 이해하기 쉬운 코드를 작성할 수 있습니다.

useState

useState는 가장 기본적인 Hook으로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 사용법은 다음과 같습니다.
​

import React, { useState } from "react";

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

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

​
useState는 초기 상태를 인자로 받고, 현재 상태와 상태를 변경하는 함수를 반환합니다. 이를 구조 분해 할당을 통해 사용할 수 있습니다.

useEffect

useEffect는 생명주기 메소드를 함수형 컴포넌트에서 사용할 수 있게 해주는 Hook입니다. componentDidMount, componentDidUpdate, componentWillUnmount와 같은 기능을 대체할 수 있습니다.
​

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Elapsed time: {seconds} seconds</div>;
}

​
useEffect의 첫 번째 인자로는 수행하는 함수가 전달됩니다. 두 번째 인자로는 종속성 배열이 전달되는데, 이 배열의 값이 변경될 때만 실행됩니다. 빈 배열을 전달하면 컴포넌트가 마운트될 때 한 번만 실행됩니다.

커스텀 Hook

커스텀 Hook을 만들어 여러 컴포넌트에서 공통된 로직을 재사용할 수 있습니다. 커스텀 Hook은 일반적인 JavaScript 함수이며, 이름은 use로 시작합니다.
​

import {
    useState,
    useEffect
} from "react";

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            setError(null);

            try {
                const response = await fetch(url);
                const data = await response.json();
                setData(data);
            } catch (error) {
                setError(error);
            }

            setLoading(false);
        };

        fetchData();
    }, [url]);

    return {
        data,
        loading,
        error
    };
}

위의 예시에서 useFetch라는 커스텀 Hook을 생성했습니다. 이 Hook은 주어진 URL에서 데이터를 불러오는 로직을 추상화하고 있습니다. 이제 이 커스텀 Hook을 사용하는 컴포넌트를 작성해봅시다.

import React from "react";
import useFetch from "./useFetch";

function Users() {
  const { data, loading, error } = useFetch("https://api.example.com/users");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

​
Users 컴포넌트에서는 useFetch를 사용하여 사용자 데이터를 불러옵니다. 이렇게 커스텀 Hook을 사용하면 로직을 재사용하고 코드를 더 깔끔하게 유지할 수 있습니다.
​
이 글에서는 React Hooks를 사용하여 함수형 컴포넌트를 개발하는 방법을 소개했습니다. Hooks를 사용하면 상태 관리와 생명주기 메소드를 더 간결하게 작성할 수 있으며, 커스텀 Hook을 통해 로직을 재사용할 수 있습니다. React Hooks를 활용하여 더 나은 프론트엔드 코드를 작성해보세요.