프론트 깃허브 링크
실전프로젝트 SA링크

실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.

1. 진행상황

와이어프레임을 최종 픽스 하였다.

react-query로 crud 하는 방법을 정리했다.

2. 배운 내용들

1. react-query 세팅

react-query 설치

index.js에서

import { QueryClientProvider, QueryClient } from "react-query";

임포트 한 다음

<QueryClientProvider client={queryClient}> 로 
  
  <App/>을 감싸고 
  
   <ReactQueryDevtools initialIsOpen={true} />로 Devtools 사용 가능

2. react-query로 Read 하기

useQuery를 사용해서 데이터를 불러온다.

const {data:이름지어주기가능, isLoading} = useQuery(
    "key값",
    async () => {
      const response = await axios.get("http://localhost:5001/test");
      return response.data;
    },
    {
      onError: (err) => {
        console.log(err);
      }
    }
  );

    {
      query.isLoading ? <div>로딩중</div> :
        query.data.map((v, i) => {
          return <div key={i}>
            <div>{v.subject}</div>
          </div>
        })
    }

query.isLoading을 사용해서 데이터가 들어오지 않았을 때,

<div>로딩중<div/>

data를 받아와서 map을 돌린다.

3. react-query로 Create 하기

 const { mutate } = useMutation(
  "key값",
  async (data) => {
    const response = await axios.post("http://localhost:5001/test", data);
    return response.data;
  },
  {
    onSuccess: (data) => {
      queryClient.invalidateQueries("key값");
      console.log(data);
    }
  }
)

  const ref = useRef(null);
 const onClick = (e) => {
   const data = {
     subject: ref.current.value
   }

   mutate(data);
 }

 <div>
     {
       query.isLoading ? <div>로딩중</div> :
         query.data.map((v, i) => {
           return <div key={i}>
             <div>{v.subject}</div>
           </div>
         })
     }
     <input type="text" ref={ref} />
     <button onClick={onClick}>전송</button>
   </div>

queryClient.invalidateQueries으로 useQuery가 자동으로 데이터를 불러오지 않을 때 데이터를 불러오도록 한다.

4. react-query로 update하기

 const { mutate: modify } = useMutation(
    "key값",
    async ({ id, data }) => {
      const response = await axios.patch(`http://localhost:5001/test/${id}`, data);
      return response.data;
    },
    {
      onSuccess: (data) => {
        queryClient.invalidateQueries("key값");
        console.log(data);
      }
    }
  )

 const clickModify = (id) => {
    modify({
      id,
      data: {
        subject: "test"
      }
    })
  }

5. react-query로 delete하기

 const { mutate: remove } = useMutation(
    "key값",
    async (id) => {
      const response = await axios.delete(`http://localhost:5001/test/${id}`);
      return response.data;
    },
    {
      onSuccess: (data) => {
        queryClient.invalidateQueries("key값");
        console.log(data);
      }
    }
  )

 const clickRemove = (id) => {
    remove(id);
  }

 return (
    <div>
      {
        query.isLoading ? <div>로딩중</div> :
          query.data.map((v, i) => {
            return <div key={i}>
              <div>{v.subject}</div>
              <button onClick={() => clickRemove(v.id)}>삭제</button>
            </div>
          })
      }
      <input type="text" ref={ref} />
      <button onClick={onClick}>전송</button>
    </div>
  );
}