[Error] Rendered more hooks than during the previous render.

에러 발생

React Hook "useForm" 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?

 

 

문제 코드 

아래 해당 코드를 MyPage()의 맨 밑에 위치시켰을 때 에러가 발생했다. 

문제 이유 

React Hook 인 `useForm`을 return 문 뒤에 선언되도록 해서 문제가 생긴 것이다. 

 

컴포넌트가 호출될 때, 

1. 해당 컴포넌트에서 사용되는 상태들을 확인하고 

2. return을 만나면 페이지를 렌더링한다. 

 

하지만 return 문 이후에 useForm 을 작성하면 

이미 렌더링을 했는데 페이지에서 사용되어야 할 상태를 선언하게 된 것임 !! 

 

문제 해결 

return 이전에 위치시켰다.