Custom Hooks로 React 게임 향상: 재미있고 실용적인 가이드

안녕하세요, React 매니아 여러분! 당신이 나와 같다면 React가 사용자 인터페이스 구축을 어떻게 쉽게 만드는지 좋아할 것입니다. 그러나 때로는 서로 다른 구성 요소에서 동일한 논리가 반복되는 경우도 있습니다. 이것이 바로 사용자 정의 후크가 등장하는 곳입니다. 이는 코드를 더 깔끔하고 효율적으로 만드는 비밀의 초능력과 같습니다. 사용자 정의 후크의 세계를 살펴보고 이것이 어떻게 React 게임을 향상시킬 수 있는지 살펴보겠습니다.

어쨌든 Hook이 무엇인가요?

먼저 후크가 무엇인지 간단히 요약해 보겠습니다. React 16.8에 도입된 후크를 사용하면 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 가장 널리 사용되는 내장 후크로는 useState, useEffect 및 useContext가 있습니다.

내장 후크의 예

'react'에서 React, { useState, useEffect } 가져오기;

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

  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>
  );
}

이 간단한 예에서는 useState와 useEffect가 함께 작동하여 상태와 부작용을 관리합니다. 깔끔하고 단순하며 강력합니다.

왜 커스텀 후크에 관심을 가져야 할까요?

맞춤형 후크의 핵심은 재사용성과 구성 요소를 깨끗하게 유지하는 것입니다. 이를 통해 구성 요소 간의 논리를 추출하고 공유할 수 있습니다. 편리한 기능을 저장하고 필요할 때마다 사용할 수 있는 개인 도구 상자라고 생각하세요.

커스텀 후크의 장점

• 재사용성: 한 번 작성하면 어디에서나 사용할 수 있습니다. 코드를 복제하지 않고도 다양한 구성요소 간에 로직을 공유할 수 있습니다.
• 가독성: 구성 요소를 렌더링에 집중하여 읽기 및 유지 관리를 더 쉽게 만듭니다.
• 유지관리성: 한 곳에서 로직을 업데이트하면 후크가 사용되는 모든 곳에 반영됩니다.

맞춤형 후크를 함께 만들어 봅시다

API에서 데이터를 가져와야 하는 여러 구성요소가 있다고 상상해 보세요. 각 구성 요소에 동일한 가져오기 논리를 작성하는 대신 이를 처리하기 위한 사용자 지정 후크를 만들 수 있습니다. useFetch를 만들어 보겠습니다.

단계별: useFetch 만들기

1. 훅 만들기: useFetch.js라는 새 파일을 만드는 것부터 시작하세요.

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 () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. Hook 사용: 이제 컴포넌트에서 useFetch를 사용해 보겠습니다.

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

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

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

      return (
        <div>
          <h1 id="Data">Data</h1>
          <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}