[React] TypeError: destroy is not a function 원인과 해결법

에러화면..

 

원인

우선 해당 에러는 useEffect와 관련이 있다.

 

자세하게 원인을 파악하기 전에

아마 이 글을 보게된 분들이 한 실수는 아래의 2가지일 확률이 높다!

1. useEffect에서 함수가 아닌 다른 것을 반환
2. useEffect(async()=>{},[])

 

2가지 실수는 모두 useEffect의 잘못된 사용이다.

 

 

해결법과 자세한 이유

- useEffect에서 함수가 아닌 다른 것을 반환하는 경우

 

before

useEffect(() => myFunction());
useEffect(() => { return myFunction() });

 

after

useEffect(() => { myFunction() });

 

 

이유

useEffect(() => {
  이펙트 함수
  return {
    클린업 함수
  };
}, [의존값]);

 

useEffect의 기본적인 구조는 위와 같은데

이때 return하는 값은 cleanup function(클린업 함수)이어야 한다. (아니면 undefined거나)

이 함수는 컴포넌트가 언마운트될 때 실행이 된다.

 

useEffect(() => myFunction());
useEffect(() => { return myFunction() });

 

위의 경우에는 함수가 반환한 값을 useEffect가 반환하게 된다.

즉, 함수가 아닌 것을 반환하므로 잘못된 사용이다.

 

하지만 위 코드를 작성자의 진짜 의도는

컴포넌트가 렌더링될 때(마운트 될 때) 실행되는 이펙트함수로 사용하려했을 것이다.

 

따라서 정확한 의도를 반영하면 아래처럼 사용해야한다.

useEffect(() => { myFunction() });

 

 

- useEffect(async()=>{})

 

before

useEffect(async()=>{},[]);

 

after

useEffect(()=>{ myFunction() },[]);

const myFunction = async()=>{...};

 

 

이유

async 키워드는 JS에서 비동기 함수를 만들기 위해서 사용된다.

이때 중요한 점은 비동기 함수는 항상 Promise를 반환한다.

 

즉, 이 case도 역시 함수가 아닌 다른 것을 반환하려 시도한 경우이다.

useEffect(async()=>{},[]);

 

코드 작성자의 진짜 의도는 비동기 함수를 호출하는 것으로 예상된다!

따라서 아래처럼 외부에서 선언한 비동기 함수를 이펙트함수로 사용하도록 변경한다.

useEffect(()=>{ myFunction() },[]);

const myFunction = async()=>{...};

 

 

 

출처

https://devtrium.com/posts/async-functions-useeffect

How to use async functions in useEffect (with examples) - Devtrium

 

https://medium.com/geekculture/react-uncaught-typeerror-destroy-is-not-a-function-192738a6e79b

React — Uncaught TypeError: destroy is not a function

https://ko.legacy.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React