2023.12.18+ 커스텀 훅

custom hook 생성규칙

함수이름은 use로 시작한다

함수 내에서는 다른 리액트훅이나 커스텀훅을 사용할 수 있다.

함수 내에서는 return 문을 통해 특정 값이나 함수를 반환해야 한다.

 

 

주의사항

1.이름 규칙 준수

2. 훅의 순서에 대한 의존성에 주의해야 한다.

3. 컴포넌트 범위에서 훅 호출: 반드시 함수 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다

4. useeffect usecallback의 의존성 배열을 이해해야 한다.

5. 커스텀훅은 순수함수로 구성되어야 한다.

 

import { useEffect, useState } from "react";

export default function useProduct() {
  const [productList, setProductList] = useState([]);
  useEffect(() => {
    axios
      .get("http://127.0.0.1:8000/products/")
      .then((result) => setProductList(result.data))
      .catch((err) => console.log(err));
  }, []);

  return [productList];
}

  const [productList] = useProduct();

만약에 get요청을 8000번뿐만 아니라 여러 포트번호에서 재사용한다면

  const baseUrl = 'http://127.0.0.1:8000/products/'

  const [productList] = useProduct(baseUrl);

파라미터로 처리 할 수 있