Trouble shooting 일지 - 광고 플랫폼 app 편 #2

이유미·2022년 10월 9일
0

< html li 태그에서 갑자기 막힘 >

1-1 포스팅 내용처럼 수정하는 과정에서 드롭다운 아이템(dropdownItem) 컴포넌트에서 갑자기 난관에 부딫혔는데, 각 드롭다운 아이템 클릭 이벤트 발생시 event.target.value로 value값(string[])을 가져오려고 했는데 자꾸만 0(number)값이 들어왔다.

=> 각 드롭다운 아이템은 mui의 MenuItem 컴포넌트를 사용했는데, MenuItem 컴포넌트는 html li 태그로 만들어진 컴포넌트였다. li 태그의 value값은 number type만 가능하여 자꾸만 0으로 읽힌 것이다. input 태그랑 똑같이 생각했었다. li 태그의 id값으로 필요한 데이터를 줘서 데이터 가져오기에 성공했다.

< 새로운 에러 >


Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

< 에러로 인한 상황 >

dashboard 페이지와 adManagement 페이지에서 각각 React.useEffect()안에서 localStorage에 저장된 값이 있는지 확인하고 있으면 이 값을 state에 저장하고 -> 이 state 값을 사용해서 query를 만드는 작업이 이루어지는데 dependency값이 계속해서 변해서 업데이트가 무한대로 일어나는 에러가 발생했다.

< 에러 원인 찾기 >

  • dependency가 계속해서 업데이트 되고 있는 원인을 찾다가 집중력이 떨어져서 일단 내려놓고 다른 포스팅을 먼저 작성했는데, 이 과정에서 무한 루프에 대한 힌트를 얻어 아차 싶어 코드를 자세히 뜯어봤더니...

    //기존 코드 
    React.useEffect(() => {
       const storedWeek = localStorage.getItem("previous-week"); 
     
       if (storedWeek !== null) { 
         const parsedStorage: string[] = JSON.parse(storedWeek);
         setSelectedRange(parsedStorage); //-> 이 부분에서 무한루프 형성 중!!!
         setDateQuery(createDateQuery(parsedStorage));
       } else { 
         setDateQuery(createDateQuery(selectedRange));
       }
     }, [selectedRange]);
  • 로컬스토리지에 데이터가 있는지 체크한 후 있으면 selectedRange 상태를 업데이트하게 했는데, 이 selectedRange로 dateQuery 상태를 업데이트하는 작업을 동시에 하게 코드를 짜서 dependency에 selectedRange을 주게 되었다. 계속 로컬스토리지가 값이 있으니 계속 selectedRange 상태가 변경되고 이를 useEffect가 감지해서 계속해서 이 루프가 무한대로 실행되고 있었다.

  • dependency를 주게된 원인이 dateQuery 상태 업데이트 작업이었기 때문에 '로컬스토리지 값 체크 후, 있으면 selectedRange로 저장하고 없으면 초기값을 사용하는 로직'과 'selectedRange 상태가 변할 때마다 dateQuery 상태를 업데이트하는 로직' 2개로 분리하여 에러를 해결했다.

    //수정 후
    React.useEffect(() => {
       const storedWeek = localStorage.getItem("previous-week");
       if (storedWeek !== null) {
         const parsedStorage: string[] = JSON.parse(storedWeek);
         setSelectedRange(parsedStorage); 
       }
     }, []);
    
     React.useEffect(()=>{
       setDateQuery(createDateQuery(selectedRange));
     },[selectedRange]);

< 결론 >

에러 발생시 에러 문구와 에러 발생 지점 코드를 꼼꼼하게 보자.

profile
신입 프론트엔드 개발자 구직중

0개의 댓글