무한 루프 onIonChange를 피하는 방법.

무한 루프 onIonChange를 피하는 방법.

2022-10-03 last update

7 minutes reading loop hooks react ionic
뒷이야기

각각에 대해 IonSelect를 사용하여 여러 필터가 있는 검색 페이지를 만드는 동안 직장에서 문제가 발생했습니다. 문제는 필터를 지우기 위해 '모두 지우기' 버튼을 추가했을 때 발생했습니다. 😱

내 솔루션

1) useState Hook를 import하여 아래와 같이 state변수를 선언하였다.

const [isResetting, setIsResetting] = useState(false)


2) 클릭 시 상태 변수를 true로 변경하는 재설정 버튼을 만들었습니다.

onClick={() => setIsResetting(true)}


3) useEffect hook를 불러와서 isResetting가 변경될 때만 실행되도록 설정합니다. 여기서 내가 달성하고 싶었던 것은 resetAllFiltersisResetting 로 설정된 경우에만 true 기능(4단계)이 실행되는 것이었습니다.

useEffect(() => {
    if (isResetting) resetAllFilters();
}, [isResetting])


4) 모든 필터의 값을 변경해야 하는 resetAllFilters 함수를 만들었습니다. 이 함수의 마지막 줄은 상태 변수 isResetting 를 다시 false 로 변경해야 합니다.

const resetAllFilters = async () => {
    // insert your code 
    setIsResetting(false);
}


5) 마지막으로 상태 변수isResettingtrue로 설정되어 있을 때 IonSelect 값이 변경되지 않도록 하여 무한 루프에 빠지지 않도록 했습니다.

<IonSelect
    multiple={true}
    placeholder="Select tags"
    value={filters.tags}
    placeholder="Select tags"
    onIonChange={e => isResetting ? console.log("reset at work") : applyFilter("tags", e.detail.value)}                                     >



그리고 짜잔! 이 5단계로 직장에서 내 문제를 해결했습니다.

온라인에서 다른 솔루션을 찾지 못했지만 다른 사람이 이 문제를 겪고 다른 방식으로 해결했는지 알고 싶습니다.


읽은 내용이 마음에 들면 왼쪽이나 아무 곳에나 ❤️를 누르십시오. 정말 마음에 든다면 하트 근처에 있는 점-점-점 아이콘을 눌러 커뮤니티와 공유하는 것을 잊지 마세요.

💻 article.close()