커스텀 후크를 사용하여 React에서 로직 재사용: 실용 가이드-JS 튜토리얼-php.cn

커스텀 후크를 사용하여 React에서 로직 재사용: 실용 가이드

WBOY

풀어 주다： 2024-08-16 18:42:03

원래의

827명이 탐색했습니다.

Reusing Logic in React with Custom Hooks: a Practical guide

커스텀 후크는 React 내장 후크와 달리 보다 구체적인 목적으로 사용되는 React의 강력한 기능으로, 공통 기능을 독립적인 기능으로 캡슐화하여 수행됩니다. 사용자 정의 후크는 재사용성을 촉진하고 구성요소 구성을 개선하며 전반적으로 코드 유지 관리성을 향상시킵니다.

이 가이드에서는 사용자 정의 후크를 사용하는 목적에 대해 자세히 알아보고 사용자 정의 후크 생성의 기본 사항과 다른 구성 요소를 사용하는 방법을 이해합니다. 그런 다음 Fetch API 사용자 정의 후크를 구축하여 실제 사례를 설명하겠습니다.

기본 사항 이해

일반적으로 개발자는 사용자 정의 후크라는 용어를 두려워하므로 이를 쉽게 설명하겠습니다.

커스텀 후크는 단순히 use 접두사(커스텀 후크가 작동하는 데 중요함)로 시작하는 기능입니다.
이 함수는 React 내장 후크를 활용하는 재사용 가능한 로직으로 구성됩니다. 일반적으로 여러 구성 요소에 동일한 논리가 있는 경우 사용자 지정 후크 사용을 고려하므로 사용자 지정 후크를 활용하면 코드 구성 및 유지 관리성 향상과 같은 여러 문제를 해결할 수 있습니다.

간단한 사용자 정의 후크 만들기

아래 예는 useState 후크를 사용하여 카운트 상태를 관리하고 카운트 상태만 설정하는 증가 또는 감소 함수를 사용하여 각각 카운트를 업데이트하는 간단한 카운터 사용자 정의 후크입니다.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

로그인 후 복사

자신만의 맞춤형 후크를 만든 것을 축하합니다. 매우 간단합니다. 다음은 이 후크를 사용하는 방법에 대해 알아볼 것입니다

구성 요소에서 사용자 정의 후크 사용

다른 구성요소에서 사용자 정의 후크를 사용하는 것은 단순히 다른 구성 요소 내부의 사용자 정의 후크에서 반환된 값을 파괴함으로써 수행됩니다

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

로그인 후 복사

커스텀 후크를 사용한 실제 사례

가장 반복되는 논리 중 하나는 전자상거래 사이트에서 인증, 결제 프로세스, 모든 제품 표시, 댓글, 리뷰 등을 위한 데이터를 가져오는 API를 가져오는 것입니다.

사용자 정의 후크를 사용하여 단순화할 수 있는 애플리케이션 전체의 반복적인 가져오기 논리의 양을 상상할 수 있습니다.

이 섹션에서는 사용자 정의 가져오기 후크를 생성합니다.

useState 및 useEffect 내장 React 후크를 사용할 예정입니다
데이터 상태, 데이터를 가져오는 동안 스피너를 표시하려는 경우 보류 상태, 가져오기 실패 시 오류 상태를 갖게 됩니다.

아래 코드는 설명이 필요합니다. useEffect 내부에서는 가져오기 논리를 처리하는 비동기식 fetchData 함수를 정의합니다. useEffect 아래에서 사용자 정의 후크는 다른 모든 구성 요소 데이터, 보류 중, 오류에서 사용할 수 있는 다음 값을 반환합니다.

useFetch 사용자 정의 후크 매개변수에 URL 값을 전달하고 있다는 점에 유의하세요. 이는 데이터가 사용자 정의 후크에 전달될 수 있음을 의미합니다

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

로그인 후 복사

페이지 구성 요소 내부의 useFetch 후크를 사용하면 이제 오류 발생 시 클라이언트에 메시지를 표시하고, 데이터를 가져오는 동안 스피너를 표시하고, 마지막으로 데이터를 클라이언트에 표시할 수 있습니다.

이 구성 요소는 모든 애플리케이션에서 반복적으로 사용할 수 있으므로 반복 코드의 양이 줄어듭니다.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

로그인 후 복사