수정 - React Hook "useState"가 조건부로 호출됨

최근에 React 후크를 사용하기 시작했고 다음 오류가 발생했습니까?
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
이 기사에서는 이 오류가 발생하는 이유와 해결 방법에 대해 설명합니다.

문제 복제

먼저 문제를 복제해 보겠습니다.

import React, { useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  if (isLoading) {
    return <div>Loading..</div>
  }
  const [data, setData] = useState({})

  return <div>Home</div>
}

export default App

위의 코드로 업데이트App.js하면 다음 오류가 발생합니다.

문제 이해

문제를 해결하기 전에 문제를 이해해 봅시다. 오류 메시지에서 알 수 있듯이 return 문 뒤나 if 조건 내에서 useState를 호출하면 안 됩니다. React 후크 호출은 항상 return 문 이전에 발생해야 하며 가급적이면 구성 요소 상단에서 발생해야 합니다.

문제 해결

오류를 수정하려면 if 조건 전에 useState 호출을 이동하기만 하면 됩니다.

import React, { useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  const [data, setData] = useState({})

  if (isLoading) {
    return <div>Loading..</div>
  }

  return <div>Home</div>
}

export default App