TIL-23.04.25

 

문제점

state 변경에 따라 동기적으로 화면에 렌더해줘야하는 상황

useEffect 안에 axios get요청 함수를 넣고, 디펜던시에 해당 데이터변수를 넣어 계속 추적하도록 작성했다.

물론 작동은 잘되었는데, 브라우저 개발자도구의 콘솔창은 불이 나고있었다.. 무한 get요청 루프....무한루프

state 변경을 감시하기위해 디펜던시에 state변수를 넣어야했는데, 이걸 넣기만하면 무한루프가 돌았다

useEffect 내부에 들어있는 useState 모디파이어 함수가 state를 변경하고 state가 변경되니 그걸 useEffect가 감지하고 다시 함수가 실행되고, 이렇게 계속 무한루프가 도는 현상이었다

 

 

 

 

시도한점

현재로선 내가 찾은 방법은 setTimeout()과 useEffect의 클린업함수에 clearTimeout을 넣어서 남는 잔여 타이머를 제거해주는 방식으로 구현했다

const [todos, setTodos] = useState([]);

useEffect(() => {
    const checkValid = setTimeout(() => {
      todoGet();
    }, 500);

    return () => {
      clearTimeout(checkValid);
    };
  }, [todos]);

아무리 다른 방법을 구상해봐도 이 방법만이 현재로선 최선인듯하다 ㅠ setTimeout 메소드를 사용해 지정 시간만큼 억지로 함수실행을 늦추는 방식이라 마음에는 들지 않는다...실시간으로 변동되는 state를 계속 반영해야하는데 이거 관련해서는 계속 생각해볼 예정이다

아직까지도 부족함을 느낀다. 더더 열심히해야겠다.. 분명히 방법이 있을거야

 

 

 

알게된점

더 열심히 공부해라 아직도 많이 부족하다