[React] 커스텀 훅 (Custom Hook)

코드의 중복을 피하고 재사용성 높이기 위해 사용하는 함수 

훅이란 것을 나타내기 위해 보통 use-로 명명함

 

컴포넌트와 마찬가지로 내부 훅인 useEffect, useState.. 모두 사용 가능함

 

일반 훅과는 다르게 리엑트에게 전달해줄 UI를 나타내는 요소들을 반환하지 않고

외부 컴포넌트에 공유할 데이터 정보를 리턴해준다.

 

✅값의 재사용이 아니라 로직을 재사용하는 개념이기 때문에 고정적인 값이 공유되는게 아님

 

import React, {useState, useEffect} from 'react';

export default function useProducts({salesOnly}) {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(undefined);
    const [products, setProducts] = useState([]);

    useEffect(() => 
    {
    setIsLoading(true);
    fetch(`${salesOnly ? 'data/sale_products.json' : 'data/products.json'}`)
    .then((res) => res.json())
    .then((data) => setProducts(data))
    .catch((err) => setError(err))
    .finally(() => setIsLoading(false))
    }
    ,[salesOnly]);

    return [isLoading, error, products];
}

import React,{useEffect, useState} from 'react';
import useProducts from '../hooks/use-products';

export default function Products() {
    const [checked, setChecked] = useState(false);
    const [isLoading, error, products] = useProducts({salesOnly : checked});
    
    const handleChange = () => {
        setChecked((prev) => !prev);
    };

    return (
        <>
        <input type='checkbox' value={checked} onChange={handleChange}></input>
        <label htmlFor="checkbox">show Only Sale🔥</label>
            <ul>
                {isLoading? '...Loading' : products.map((item) => (
                    <li key={item.id}>
                        <article>
                            <h3>{item.name}</h3>
                            <p>{item.price}</p>
                        </article>
                    </li>
                )) }
                {error && <p>에러가 발생했음</p>}
            </ul>
        </>
    );
}