자바스크립트 Custom React Hooks 실용 예제

06 Nov 2023

customhook

React Hooks는 React 16.8 버전부터 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 부가적인 기능을 사용할 수 있게 해줍니다. Custom Hooks는 이러한 React Hooks를 사용하여 만든 재사용 가능한 로직 블록입니다. 이번 블로그 포스트에서는 자바스크립트 Custom React Hooks의 실용 예제를 살펴보겠습니다.

1. useFetch Custom Hook

useFetch Custom Hook은 API로부터 데이터를 가져오는 로직을 담당합니다. 이 Custom Hook을 사용하면 다양한 컴포넌트에서 API 호출 로직을 중복해서 작성할 필요 없이, 간편하게 데이터를 가져올 수 있습니다.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading };
};

위의 코드에서는 useState와 useEffect를 사용하여 데이터와 로딩 상태를 관리합니다. useEffect 훅은 컴포넌트가 렌더링될 때마다 실행되는데, 이를 이용하여 API를 호출하고 가져온 데이터를 useState 훅을 사용하여 상태에 저장합니다.

이제 이 Custom Hook을 사용하는 예제를 살펴보겠습니다.

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

const ExampleComponent = () => {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {data && data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default ExampleComponent;

위의 코드에서는 useFetch Custom Hook을 사용하여 API에서 데이터를 가져오고, 로딩 상태에 따라 로딩 중인 상태를 나타내거나 데이터를 화면에 렌더링합니다.

2. useForm Custom Hook

useForm Custom Hook은 폼 입력 값 관리에 사용됩니다. 폼의 입력 값 상태, 값 변경 이벤트 핸들러 등을 관리하여 간단한 폼을 만들 수 있습니다.

import { useState } from 'react';

const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return { values, handleChange, resetForm };
};

위의 코드에서는 useState를 사용하여 입력 값 상태를 관리하고, handleChange 함수를 통해 값 변경을 처리합니다. resetForm 함수는 초기 상태로 폼을 리셋하는 기능을 제공합니다.

이제 이 Custom Hook을 사용하는 예제를 살펴보겠습니다.

import React from 'react';
import useForm from './useForm';

const ExampleForm = () => {
  const { values, handleChange, resetForm } = useForm({
    name: '',
    email: '',
    message: '',
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    // 폼 데이터를 서버로 전송하는 등의 로직 처리
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={values.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <textarea
        name="message"
        value={values.message}
        onChange={handleChange}
        placeholder="메세지"
      ></textarea>
      <button type="submit">전송</button>
    </form>
  );
};

export default ExampleForm;

위의 코드에서는 useForm Custom Hook을 사용하여 폼 값 관리를 처리하고, handleSubmit 함수를 통해 폼 제출 이벤트를 처리합니다.

결론

위의 예제를 통해 자바스크립트 Custom React Hooks의 실용적인 사용법을 살펴보았습니다. Custom Hook을 사용하면 중복되는 로직을 모듈화하여 재사용할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이를 통해 개발자들은 보다 효율적으로 React 애플리케이션을 구축할 수 있습니다.

참고 자료:

React 공식 문서