리엑트 후크(React Hook) useEffect cleanup function

리엑트를 개발하면서 만난 경고(Warning)입니다.

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup

 

이러한 경고(오류)가 나오는 원인은 페이지 이동 이벤트(routing)가 일어나면서, 기존의 useEffect 내부의 내용이 이미 지나버린 페이지에 대해서 동작하였기 때문입니다.

아래와 같은 코드가 있었습니다.

    const [myData, setData] = useState([
        { id: "Work", label: "Work", value: 120 },
        { id: "Eat", label: "Eat", value: 35 },
        { id: "Commute", label: "Commute", value: 33 }
    ])

    useEffect( ()=>{  
        setTimeout(() => {
            let randomTxt = makeid(6)
            setData( data=> data.concat({ id: randomTxt, label: randomTxt, value: 15 }))
        }, 3000);
    },[])    

 

해당 페이지에 도착하면 3초뒤에 setData함수를 통해 상태를 변화시키는 기능 이였습니다.

사용자가 만약 해당 페이지에 도착하여 3초뒤에 다른 페이지로 이동하면 상관 없습니다.

그런데 3초 안됬는데 페이지를 이동하면 어떻게 될까요?

내용이 어려우나 맨 마지막 cleanup이라는 문구가 보입니다.

 

 

해당 페이지는 없는데 setData함수를 통해 상태를 변화시키려니 리엑트에서는 안돼! 라는 경고를 보낸 것 입니다.

이를 해결하기 위해서는 아래처럼 코드를 수정하여 주면 됩니다.

    const [myData, setData] = useState([
        { id: "Work", label: "Work", value: 120 },
        { id: "Eat", label: "Eat", value: 35 },
        { id: "Commute", label: "Commute", value: 33 }
    ])

    useEffect( ()=>{  
        let timer = setTimeout(() => {
            let randomTxt = makeid(6)
            setData( data=> data.concat({ id: randomTxt, label: randomTxt, value: 15 }))
        }, 3000)
        return ()=> clearTimeout(timer)   //더이상 하지 않게
    },[])    

 

useEffect의 cleanup함수 작성 방법을 통해서 하는 행위의 끝났음을 알려주는 것 입니다.

cleanup 함수를 만드는 방법은 useEffect 내부에 반환 함수를 위 코드처럼 작성 해 주는 것 입니다.

다시 말해, 상태의 종료를 반환함수에 정의하면 되는 것 입니다. :)

 

React의 Hook 기능이 이처럼 함수형으로 되어 있어서 class로 구현이 가능하였던 기능들이 익숙하게 작성되지 않아서 만난 오류였습니다.

이상으로 리엑트의 useEffect cleanup function에 대해서 살펴 보았습니다.

틀린점, 궁금한점은 언제든 연락 주세요!!