“Uncaught TypeError” 문제 해결하기

useEffect React Hook을 사용하여 AJAX 요청 시 “create is not a function” 타입 오류가 발생합니다.

React 애플리케이션에서 다음 오류를 마주치는 경우: Uncaught TypeError: create is not a function, useEffect React Hook을 AJAX 요청과 함께 사용하려고 할 때, 걱정하지 마세요. 이 오류는 일반적으로 useEffect 훅에 콜백 함수가 전달되지 않을 때 발생합니다.

문제 파악하기

주어진 예시에서는 useEffect 훅이 API에서 데이터를 가져오고 상태를 업데이트하는데 사용되고 있지만 필요한 콜백 함수가 누락되었습니다. 아래의 코드 조각을 살펴보세요:

function App() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    // API 데이터를 가져와서 상태를 업데이트합니다.
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []);
  
  return (
    <div>
      {user ? user.name.first : '로딩 중...'}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('app'));

문제는 useEffect 훅 내부에 있는 누락된 콜백 함수에 있습니다. 현재 fetch 요청을 직접 실행하고 있으며 아무것도 반환하지 않습니다. fetch 호출을 화살표 함수나 익명 함수로 감싸면 문제가 해결됩니다.

해결 방법

Uncaught TypeError: create is not a function 오류를 해결하기 위해 아래와 같이 코드를 수정해야 합니다:

function App() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => { // 콜백 함수를 전달하세요!
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []);
  
  return (
    <div>
      {user ? user.name.first : '로딩 중...'}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('app'));

useEffect 훅 내부에 () => {…} 화살표 함수를 포함시킴으로써 fetch 호출이 의도한대로 실행되도록 보장합니다. 이제 API에서 데이터가 올바르게 가져와지고 상태를 업데이트하는데 사용될 것입니다.

결론

마무리로, Uncaught TypeError: create is not a function 오류는 useEffect 훅에 적절한 콜백 함수가 제공되지 않을 때 발생합니다. fetch 호출을 감싸는 콜백 함수를 포함함으로써 이 오류를 해결하고 데이터를 원하는 대로 가져와서 사용할 수 있게 됩니다.

React에서 useEffect를 사용할 때, 항상 훅 내부에 적절한 콜백 함수를 포함하는지 확인하고 비슷한 오류를 겪지 않도록 해야 합니다.

참고 자료 : 

reactjs