Custom hook

Custom hook

Custom hook이란?

useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만, 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다.

custom hook의 이름은 무조건!!!! use로 시작해야한다!

//UserList.js

import React, { useEffect, useState } from "react"
import { Link } from "react-router-dom"

function UserList() {
  const [userList, setUserList] = useState([])
  const url = "https://jsonplaceholder.typicode.com/users"

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(resJson => setUserList(resJson))
  }, [])

  return userList.map(user => (
    <Linkto={`/${user.id}`}key={user.id}className="list-group-item list-group-item-action">
      <div>{user.name}</div>
    </Link>))
}

export default UserList

 

//userDetail

import React, { useEffect, useState } from "react"
import { useParams } from "react-router-dom"

function UserDetail(props) {
  const [userInfo, setUserInfo] = useState([])
  const { id } = useParams()
  const url = `https://jsonplaceholder.typicode.com/users/${id}`useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(resJson => setUserInfo(resJson))
  }, [])

  return (
    <div>
      {userInfo.name}
      <br />
      {userInfo.email}
      <br />
      {userInfo.phone}
    </div>)
}

export default UserDetail

두 컴포넌트에서 data를 받아오는 useEffect 내의 fetch함수 부분이 똑같기 때문에 이를 하나로 통일시키고 싶습니다.  그럴때 우리는 custom hooks를 통해 이를 해결할 수 있습니다.

hooks라는 디렉토리를 만든 후 useFetch.js를 만들어줍니다.

//useFetch.js

import { useEffect, useState } from "react"

function useFetch(url) {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(resJson => setData(resJson))
  }, [url])

  return data
}

export default useFetch

UserList,UserDetail 컴포넌트에서 겹쳤던 fetch부분을 그대로 넣어주고 data를 return 해주면 끝입니다.

url을 인자로 받고 해당 url을 useEffect의 의존성 배열로 넣어주면 custom hook이 원할때 잘 호출된다.

custom hooks 적용 후

//UserList.js

import React from "react"
import { Link } from "react-router-dom"
import useFetch from "./hooks/useFetch"

function UserList() {
  const userList = useFetch("https://jsonplaceholder.typicode.com/users")

  return userList.map(user => (
    <Linkto={`/${user.id}`}key={user.id}className="list-group-item list-group-item-action">
      <div>{user.name}</div>
    </Link>))
}

export default UserList

//UserDetail.js

import React from "react"
import { useParams } from "react-router-dom"
import useFetch from "./hooks/useFetch"

function UserDetail(props) {
  const { id } = useParams()
  const userInfo = useFetch(`https://jsonplaceholder.typicode.com/users/${id}`)

  return (
    <div>
      {userInfo.name}
      <br />
      {userInfo.email}
      <br />
      {userInfo.phone}
    </div>)
}

export default UserDetail

 

단 한줄로 useEffect와 useState 그리고 fetch 함수를 대체할 수가 있어졌습니다.

코드보다 훨씬 간단해졌고 custom hooks의 네이밍이 잘되어있다는 가정하에 코드 가독성도 훨씬 높아질 수 있습니다!

 

출처 : https://velog.io/@kysung95/짤막글-Custom-Hooks을-만들어보자