[main Project] 15일차 리뷰 (09.21 ~ 09.26)

15일차 리뷰 (09.21 ~ 09.26)

✅ 새로 알게 된 점 1 : useDetectClose

• 활용이 정말 많이 되는 커스텀 훅이다
• 메인페이지 헤더 메뉴, 필터 셀렉터, 검색 자동완성 등에서 활용되었다.

[ 사용 방법 ]

• import 해주고
• const [isOpen, ref, handleOpen] = useDetectClose(false)
• 남겨져있어야 하는 부분에 ref를 달아준다!
  → 필터 셀렉터 같은 경우, 필터 선택시 닫아져버리는 경우가 있었는데 그럴 경우 open btn + 필터 셀렉트 부분을 하나의 div로 감싸서 그 div에 ref 를 달아주면 된다.

import { useEffect, useState, useRef } from "react";

const useDetectClose = (initialState) => {
  const [isOpen, setIsOpen] = useState(initialState);
  const ref = useRef(null);

  const handleOpen = () => {
      setIsOpen(!isOpen);
  };

  useEffect(() => {
  // ref 값이 널이 아니거나 현재값에 포함되어있지 않으면 상태를 바꿔준다 
    const onClick = (e) => {
      if (ref.current !== null && !ref.current.contains(e.target)) {
        setIsOpen(!isOpen);
      }
    };
    if (isOpen) window.addEventListener("click", onClick);
    return () => window.removeEventListener("click", onClick);
  }, [isOpen]);

  return [isOpen, ref, handleOpen, setIsOpen];
};

export default useDetectClose;

✅ 새로 알게 된 점 2 : SWR 활용하기

• Data fetching을 hooks로 빼서 관리하고싶었지만 같은 코드지만 swr 에서 파라미터로 엔드포인트를 받는 방법을 몰라서 고민이 됐다. 🤔
• 멘토링을 통해 성콩!
  

[ 활용 방법 ]

• 받아온 파라미터를 axios 부분이 아닌 useSWR(${url}, fetcher) 이 부분에 해주어야 한다.
• axios.get 부분의 URL end-point 가 useSWR의 키값 (${url} 부분)과 동일해야한다.!!!

const BASE_URL = `${import.meta.env.VITE_BASE_URL}`;

export const useGetPlace = (url) => {
  const fetcher = async (innerURL) => {
    const res = await axios.get(`${BASE_URL}${innerURL}`);
    return res.data;
  };
  const { data, error } = useSWR(`${url}`, fetcher);

  return {
    data: data,
    isLoading: !error && !data,
    isError: error,
  };
};

  import { useGetPlace } from "../hooks/useAPI";


  // URL은 변하는 값으로 카테고리 별로 데이터를 받기 위해 사용되었다
  const URL = `/api/v1/place/category/all?page=${pageInfo}&size=8`;
  
  const { data, isLoading, isError } = useGetPlace(URL);

👍 잘한 점

• 전역으로 상태관리를 하니 코드도 깔끔하고 props이 헷갈리는 일이 확실히 줄었다!
• hooks를 만들고 사용하게 되었다👍
• 마이페이지 제작 시 메뉴에 따른 데이터를 따로 호출해야했었다. 같은 컴포넌트 내에 다른 API 호출을 고민했었는데 메뉴를 상태관리하고 클릭한 메뉴를 담아준다. 메뉴별 API를 호출하게 구현했더니 성공했다!
• 마이페이지 반응형도 같이 진행했다 굳굳

🥲 아쉬운 점

• 테스트가 미뤄지는 점,,,,

🚀 추가적으로

• hooks 로 뺄 수 있는 부분에 대해 고민해보기!
• 마이페이지 이미지 부분에 대해 고민해봐야겠당
• 데이터 없을 때 컴포넌트를 하나