[React] custom Hook 사용하기

앞에서 fetch로 API 요청했을때
useState 설정하고, useEffect()로 fetch 요청하는 로직이 중복 사용됐었
다

그래서 이럴때 customHook을 사용해서 중복되는 로직을 처리해보자!

• 중복되는 로직

    const [days,setDays]=useState([]);
   
    //count가 바뀔때만 시행됨. 그냥 딱 한번만 렌더링 될때 시행되게 하고 싶으면 [] 빈배열로 !
    useEffect(()=>{
        fetch("http://localhost:3001/days")
        .then(res=>{
            return res.json();
           
        })
        .then(data=>{
            setDays(data);
        })
    },[]);

• src/hooks/useFetch.js 생성

import {useEffect,useState} from 'react';

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

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

    return data;

}

위 중복 로직을 보면 state 설정, useEffect안에 url 사용.

그럼 해당 useFetch hooks를 기존 컴포넌트에 사용하려면?

import {Link} from 'react-router-dom';
import {useState,useEffect} from 'react';
import useFetch from '../hooks/useFetch';

export default function DayList(){
    const days=useFetch("http://localhost:3001/days");
    // const [days,setDays]=useState([]);

    // useEffect(()=>{
    //     fetch("http://localhost:3001/days")
    //     .then(res=>{
    //         return res.json();
           
    //     })
    //     .then(data=>{
    //         setDays(data);
    //     })
    // },[]);

    return(
        <div>
            <ul className="day">
                {days.map(day=>(
                    <li key={day.id}>
                        <Link to={`/day/${day.day}`}>
                        Day {day.day}
                            </Link></li>
                ))}
            </ul>
        </div>
    )
}

이렇게 url부분에 해당 주소를 넣으면 끝!!

const days=useFetch("http://localhost:3001/days");

한 줄로 api 호출 완성.!