Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

react hook의 갯수는 무조건 동일해야한다.

만약 저 에러가 났다면 return 이후에 hooks가 사용되었는지 확인해볼 필요가 있다.

hooks는 무조건 상위부분으로 다 올려야한다.

ℹ️ 잘못사용 예

  // 이러면 안된다. return 은 hooks보다 무조건 아래로...
  if (!isLogin) {
    return <RoundButton onClick={login}>로그인</RoundButton>
  }

  useEffect(() => {
	...
  }, [getPostsStatus])
  useEffect(() => {
    router.push('/')
  }, [])

ℹ️ 수정

  useEffect(() => {
	...
  }, [getPostsStatus])
  useEffect(() => {
    router.push('/')
  }, [])
  if (!isLogin) {
    return <RoundButton onClick={login}>로그인</RoundButton>
  }