후크 소개

Hooks는 React 16.8에서 출시되었으므로 상태를 추적하거나 'GET' 요청을 만드는 것과 같은 웹 앱에서 몇 가지 기본 작업을 수행하는 데 사용하는 useState 및 useEffect 후크에 익숙해졌을 것입니다. 하지만 우리가 직접 후크를 만들 수 있기 때문에 실제로 후크를 사용할 수 있는 더 많은 기회가 있습니다.

프로그래머로서 우리는 항상 코드를 DRYer로 만들려고 노력하고 후크는 이를 수행하는 데 도움이 되는 훌륭한 도구입니다. 다양한 구성 요소에서 여러 번 수행해야 하는 작업을 생각하면 몇 가지 예가 떠오릅니다. 양식 만들기 또는 서버에 요청하기. 이것들은 둘 다 우리의 코드를 건조시키는 데 사용할 수 있는 훌륭한 사용자 정의 후크를 만들 것입니다. 이 게시물에서는 프로젝트의 모든 양식에 대한 사용자 지정 후크를 만드는 방법을 알려 드리겠습니다.

원본 코드를 보면

사용자 정의 후크를 만들 때 먼저 후크가 대체할 원본 코드를 확인합니다.

const NewReview = ( {airline, currentUser} ) => {
  const [form, setForm] = useState({
      title:"",
      score:1,
      content:""
    })

  const handleChange = e => {
    setForm({
      ...form,
      [e.target.name]:e.target.value
    })
  }

return (
<form onSubmit={handleSubmit}>
        <input type="text" name="title" value={form.title} onChange={handleChange} placeholder="Title"/><br/>
        <input type="text" name="score" value={form.score} onChange={handleChange} placeholder="Score"/><br/>
        <input type="text" name="content" value={form.content} onChange={handleChange} placeholder="Score comments"/><br/>
        <input type="submit" placeholder="Submit"/>
      </form>
)

그것이 하나의 예이고, 다른 예를 보면 내 모든 양식이 초기 상태를 갖는 패턴을 본 다음 동일한 값을 반영하는 상태와 입력 필드를 유지하기 위한 handleChange 함수를 봅니다.

엄청난! 이제 후크에 포함할 항목에 대한 아이디어를 얻었으므로 시작하겠습니다!

후크 만들기

원하는 방식으로 코드를 구성할 수 있지만 모든 사용자 정의 후크를 한 곳에 두는 것이 좋습니다. src 레이블이 붙은 hooks 아래에 폴더가 있을 것입니다.

기억해야 할 한 가지 중요한 점은 후크에는 따라야 하는 매우 특정한 명명 규칙이 있다는 것입니다. 모든 후크는 'use'라는 단어로 시작해야 합니다. 그래서 'useState'와 'useEffect'라는 이름을 그대로 붙인 것입니다. 따라서 양식 후크의 경우 'useForm', 'useInput' 또는 'useMyCustomFormMakerHook'으로 이름을 사용할 수 있습니다. 하지만 저는 단순하게 유지하는 것을 좋아하므로 'useForm'을 사용하겠습니다.

import React, {useState} from 'react'

export const useForm = (initialForm) => {

  return 
}

다른 후크를 사용하여 사용자 정의 후크를 만들 수도 있으므로 useState를 가져왔습니다. 후크가 받기를 원하는 모든 입력은 위에서 initialForm으로 수행한 것처럼 인수로 배치합니다.

이제 원래 후크에는 두 가지 주요 부분이 있습니다. 양식에 값에 사용하는 상태가 있고 핸들 변경이라고 하는 함수가 있습니다. 따라서 원래 코드에서 추가해 보겠습니다.

import React, {useState} from 'react'

export const useForm = (initialForm) => {
const [form, setForm] = useState(initialForm)

  const handleChange = e => {
    setForm(
      {...form,
      [e.target.name]:e.target.value}
      )
      // console.log(e.key)
  }
  return 
}

멋져 보이는 거기! 이제 후크를 완료하기 위한 마지막 단계는 반환할 항목에 대해 생각하는 것입니다. 저는 항상 useState 후크와 그것이 변수와 함수를 반환하는 방법에 대해 생각합니다. 그것이 바로 여기서 우리가 하고 있는 일이기 때문입니다. 다음과 같이 배열에 반환하여 원래 useState처럼 보이게 할 수 있습니다.

import React, {useState} from 'react'

export const useForm = (initialForm) => {
const [form, setForm] = useState(initialForm)

  const handleChange = e => {
    setForm(
      {...form,
      [e.target.name]:e.target.value}
      )
  }
  return [form, handleChange]
}

좋습니다. 이전 코드를 후크로 바꿔서 이 새로운 후크를 직접 사용해 보겠습니다.

import { useForm } from "../hooks/useForm"

const NewReview = ( {airline, currentUser} ) => {
  const [form, handleForm] = useForm({
      title:"",
      score:1,
      content:""
    })

return (
<form onSubmit={handleSubmit}>
        <input type="text" name="title" value={form.title} onChange={handleChange} placeholder="Title"/><br/>
        <input type="text" name="score" value={form.score} onChange={handleChange} placeholder="Score"/><br/>
        <input type="text" name="content" value={form.content} onChange={handleChange} placeholder="Score comments"/><br/>
        <input type="submit" placeholder="Submit"/>
      </form>
)

그리고 우리는 간다! 우리는 코드를 DRYer로 만들기 위해 사용자 정의 후크를 만들었습니다. 이 후크는 현재 텍스트 유형 입력에 대해서만 작동하지만 다른 유형도 확인하기 위해 조건문을 입력하는 것은 쉽습니다. 시도 해봐! 이제 기본 get 요청에 대한 사용자 정의 후크를 만들 수 있는지 확인하십시오!

사용자 정의 후크에 대한 자세한 내용은 React 문서here를 확인하세요.