[TIL] 20240204 개발일지

알고리즘 

boj 1759 암호만들기

boj 12101 123더하기

 

123더하기에서 중복 순열을 통해 구현을 진행하였는데, 다른 사람의 코드를 보니 단순히 재귀 문제로 생각하고 구현했을 때 더 간결한 코드가 나오는 것 같았다.

 

굳이 순조부에 한정지어서 생각하지 않고 재귀적으로 구현한다는 생각을 가지는 것이 중요할 것 같다.

 

 

Front-End

react query 무한 호출

const paymentQuery = useQuery({
    queryKey: ['payment'],
    queryFn: () => {
        return getPayment();
    },
    staleTime: 10 * 60 * 1000, // 문제 해결 부분
});

const updatePaymentStateMutation = useMutation({
    mutationFn: ({ payment, changeState }) => updatePaymentState(payment, changeState),
});

 

react query로 데이터를 읽어오는 기능을 구현하고, 업데이트하는 함수를 선언했는데 읽어오는 기능을 무한하게 호출하는 문제가 있었다.

 

업데이트 코드로 인해 화면에 렌더링이 다시 일어나게 되고, 그러면 렌더링 된 결과로 인해 다시금 새로운 데이터를 호출하는 무한 순환이 일어나는 것 같다.

 

그래서 staleTime을 주고나니 새로고침하는 문제는 발생하지 않았다.

 

 

 

 

react query refetch

  useEffect(() => {
    paymentQuery.refetch();
  }, []);

 

하지만 staleTime을 주면 새로운 데이터로 fresh 되는데 다소 시간이 소요되기 때문에 이 부분 역시 해결해주어야 했다.

 

그래서 refetch()를 이용하여, 화면 이동이나 새로고침 시 데이터를 다시 읽어오도록 구현하였다.

 

 

 

react query 데이터 읽기 & 업데이트 및 쓰기 사용법

정확히 맞습니다! useQuery는 데이터를 가져오는 데 사용되며 
주로 읽기(read) 작업에 적합합니다. 

반면에 useMutation은 데이터를 수정하거나 업데이트하는 데 사용되며 
주로 쓰기(write) 작업에 적합합니다.


useQuery는 주로 서버에서 데이터를 가져와 UI에 표시하는 데 사용되며, 
캐싱, 재시도 및 리패칭과 같은 기능을 제공합니다.

반면에 useMutation은 주로 사용자 입력에 따라 
서버 상태를 변경하거나 업데이트하는 데 사용되며, 
비동기적으로 백엔드와 상호 작용합니다.


따라서 일반적으로 useQuery를 사용하여 데이터를 가져오고, 
useMutation을 사용하여 데이터를 변경 또는 업데이트합니다. 

두 훅은 React Query에서 제공하는 중요한 도구로, 
서버와 클라이언트 간의 데이터 흐름을 관리하는 데 도움이 됩니다.

 

 

 

 

기타