4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 10월 25일 23:27 #102080
이영호참가자Debouncing 이라는걸 찾아보는데 이렇게 쓰는걸 발견했습니다. ex app.js const val = useDebouncing(value,1000) // 렌더링 될 때마다 계속 호출됨 랜더링이 계속 될 시에 함수 호출이 계속되는데 같은 놈이 계속 호출 당하는 건가요? useDebouncing 안에서 useEffect를 사용하는데, 모든 유투브 동영상에서 설명하기를 value값이 변경되면, 타이머가 실행됩니다~ 라고 설명하는데, 애초에 인자로 받는 값이 변경을 감지한다는 것이 이해가 되지 않습니다.. 123456 타이핑 하고 기다린다고 했을 때
useDebouncing(1,1000) useDebouncing(12,1000) useDebouncing(123,1000) ... useDebouncing(123456,1000) 저 1, 12, 123숫자를 변경된다 라고 말 한다는 것이, 저 값을 저장하고 있다는 걸 뜻하는데, 함수로 받는 인자를 어떻게 저장한다는 것인지 가능하다면, 기존 value값을 '알고 있다' 가 되야 되고, 그러면 함수가 매번 새로 실행되는 것이 아닐 것 같아서요
새로 메모리에 함수의 복사본이 생기는 건지, 아니면 처음 app.js 만들어질 때 하나가 딱 만들어지고 만들어진 것이 app.js 사라질 때 까지 딱 버티고 있는 건지 궁금합니다. 한번 딱 버티고 있는 것이 맞으면 state도 계속 생기는 건 아닌 것 같아서요 우선 useDebouncing 에 useEffect로 체크해보니 같은 놈인 것 같긴 합니다. 아래 코드 첨부하고 필요한 부분만 굵게 표시했습니다. 그냥 대충 긁어다 붙이고 넘어가도 되는 부분이긴 한데.. 너무 찝찝한데 몇 시간 동안 검색해도 안보이길래 질문 드립니다 시간이 오래 걸린다면 키워드라도 알려주시면 찾아 보겠습니다!
import {useEffect, useState} from "react";
export default function useDebouncing(value,time) { const [debouncedValue,changeDebouncedValue] = useState(value)
useEffect(()=>{ console.log("짜잔 내가 돌아왔다") // 한번만 실행되는 것으로 볼 때 한 놈(?) 이 계속 호출당하는 것으로 보입니다 },[]) useEffect(()=>{ console.log("타이머 시작") const timer = setTimeout(()=>{
changeDebouncedValue(value) console.log("값 변경") },time)
return ()=> console.log("타이머 종료") clearTimeout(timer) },[value])
console.log("값 반환", debouncedValue) return debouncedValue
}
2023년 10월 26일 10:16 #102103
codingapple키 마스터함수나 use어쩌구도 재렌더링시 계속 실행됩니다 근데 html 재렌더링을 해줄지말지를 1초마다 결정하는 것일 뿐인듯요
2023년 10월 26일 11:39 #102113
이영호참가자use어쩌구도 재 렌더링 시 계속 실행된다고 하셨고 재 렌더링을 1초마다 결정한다고 하셨는데요 다른 함수들은 재 렌더링시 잘만 실행하는데, 저 변수를 사용하는 함수는 실행이 안되는 것 같습니다. state값이 1초뒤에 변경되어 나중에 렌더링 되더라도, 저 state말고 다른 state에 의해서 재 렌더링 될 때는 다른 함수들 처럼 api 호출은 나가야 되는 것 아닌가요? // 재 랜더링을 1초마다 결정하게 하고
let debouncedValue = useDebouncing(tag,1000);; // 그 변수 이용해서 쿼리 날리고
let {data,isLoading, isError} = useQuery({queryKey: ['tag '+ debouncedValue],queryFn:()=>{ return fetch(process.env.NEXT_PUBLIC_BACKEND_URL + '/api/v1/article/' + boardName + '?tag=' + debouncedValue,{method: 'get'}) .then(value => value.json())}}) // 밑에는 다른 기타등등 코드들 있는데 api는 호출이 안되는데 기타등등 코드들은 잘만 실행됨 console.log(등등) let a = 함수() 다른 기타등등 코드들은 멀쩡히 잘만 실행되는데 저 de어쩌구 변수가 들어가 있는 곳은 쿼리가 안 날라갑니다 이유를 모르겠습니다;;
2023년 10월 26일 13:47 #102124
codingapple키 마스터리액트쿼리쓰면 refetch라는 함수같은거 쓸 수 있을텐데 그거 쓰면 다시 수동으로 get요청보내줄걸요
-
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.