13. Custom Hooks 사용자 훅 만들기

useEffect(), useState() 와 같은 Hook을 사용자가 만들어서 사용하기

비슷한 작업들을 하나의 custom 훅을 만들어서 사용하기.

 

1. hooks 폴더 하나 만들기

2. 사용자 훅 이름 정해서 만들기 ex(useFetch.js)

3. 바뀌는 부분은 api url 주소 밖에 없으므로 컴포넌트 매개변수로 url값을 받는다.

import { useEffect, useState } from "react";

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

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

    return data;
}

이전에 만들었던 useEffect()를 새로 만든 커스텀 훅 useFetch를 이용하도록 수정

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

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

    // useEffect(()=>{
    //     //fetch() 이용하면 Promise 반환 된다.
    //     fetch("http://localhost:3001/days")
    //     .then(res => {
    //         return res.json();
    //     })
    //     .then(data => {
    //         setDays(data);
    //     });
    // },[]);

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

import { useParams } from 'react-router';
import useFetch from '../hooks/useFetch';
import Word from './Word';


export default function Day(){
    const a=useParams();
    console.log(a);

    const day=a.day;
    //dummy.word 대신 fetch를 이용하여 데이터를 불러올 것이다. 
    
    const words=useFetch(`http://localhost:3001/words?day=${day}`);

    return (
    <>
    <h2>Day {day}</h2>
        <table>
            <tbody>
                {words.map(word=>(
                    <Word word={word} key={word.id}/>
                ))}
            </tbody>

        </table>
    </>
    );
}