• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Next.js 게시판 component, state, useEffect 관련 질문입니다.

component, state, useEffect 관련 질문입니다.

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #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
    }
    #102103

    codingapple
    키 마스터
    함수나 use어쩌구도 재렌더링시 계속 실행됩니다
    근데 html 재렌더링을 해줄지말지를 1초마다 결정하는 것일 뿐인듯요
    #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어쩌구 변수가 들어가 있는 곳은  쿼리가 안 날라갑니다 이유를 모르겠습니다;;
    
    
    
    
    #102124

    codingapple
    키 마스터
    리액트쿼리쓰면 refetch라는 함수같은거 쓸 수 있을텐데 그거 쓰면 다시 수동으로 get요청보내줄걸요
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠