[error react] React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render

에러 : React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render

 

# 원인 react에선 hook 앞에 hook이 아닌 함수들 존재할시 나타나는 에러.

 

# React Hook 이란 :

React에서 상태(state)와 생명주기(lifecycle) 같은 기능을 함수형 컴포넌트에서 사용할 수 있게 해주는 함수입니다. 예전에는 상태나 생명주기 같은 기능을 클래스형 컴포넌트에서만 사용할 수 있었는데, React Hooks를 사용하면 함수형 컴포넌트에서도 이러한 기능을 손쉽게 사용할 수 있습니다.

 

# 해결 

ex) 

if (!card) return <div>Loading...</div>
const [rating, setRating] = useState(0);

(x) hook 앞에 if문 존재.

 

 

const [rating, setRating] = useState(0); 
if (!card) return <div>Loading...</div>

(o)

문법으로써 hook은 이처럼 최상위에 존재 해야함.