🔎React Hook

• React 16.8 부터 추가된 요소
• Hook을 이용하면 기존 Class 코드 없이 함수 컴포넌트에서 상태 관리와 여러 React 기능을 사용할 수 있음
• useState , useEffect , useReducer , useCallback , useMemo 등 여러 내장 함수 존재

🔎Custom Hook

• 개발자가 직접 만들 수 있는 Hook(함수)
• 반복적으로 사용되는 로직을 추상화하여 Hook으로 만들어 재사용성을 높임
  코드 추상화 : 프로그래밍에서 특정한 기능, 동작 또는 개념을 일반화하거나 단순화하여 사용자가 더 쉽게 이해하고 활용할 수 있도록 하는 과정
• Custom Hook의 이름은 일반적으로 use-로 시작
• Hook은 값의 재사용이 아니라 로직의 재사용을 위한 것
• 일반 컴포넌트 return 값 : UI를 나타내는 jsx
  Custom Hook return 값 : 외부와 공유하고 싶은 결과값(데이터)

💡Custom Hook 적용해보기

useFetchData.jsx

• API 요청을 통해 데이터를 받아오는 부분 Custom Hook으로 분리

import { useState, useEffect } from 'react';

function useFetchData(url) {
  // 커스텀 훅 안에서 재사용할 내부 상태 가져옴
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {    
    fetch(url)
    .then((res) => res.json())
    .then((data) => {
      setData(data);
    })
    .catch((error) => {
      setError(error);
    })
    .finally(() => {
      setLoading(false);
    });
    
  }, [url]);

  // 외부와 공유하고 싶은 데이터 return
  return { data, loading, error };
}

export default useFetchData;

사용하는 파일.jsx

import React from 'react';
// 커스텀 훅 import
import useFetchData from './useFetchData'; 

function App() {
  // 커스텀 훅 사용
  const { data, loading, error } = useFetchData('https://example.url');

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

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

  return (
    <div>
      <h1>Post Title: {data?.title}</h1>
      <p>Post Body: {data?.body}</p>
    </div>
  );
}

export default App;

• API 요청을 통해 데이터를 받아오는 로직이 필요하면 어떤 파일에서나 useFetchData.jsx 커스텀 훅을 활용해 더 간결하게 받아올 수 있음