useFormState, useFormStatus 관련 질문

Next + React Query로 SNS 서비스 만들기

클라이언트 컴포넌트에서 Server Actions 사용하기

24.10.12 20:58 작성

[섹션4-4 클라이언트 컴포넌트에서 ServerActions 사용하기]

제가 사용하고있는 라이브러리 버전입니다.

    "next": "^15.0.0-canary.181",
    "next-auth": "^5.0.0-beta.22",
    "react": "^18",
    "react-dom": "^18"

useFormState

현재 공식문서에선 useFormState from 'react-dom'이 아닌 useActionState from 'react` 로 사용하도록 되어있더라구요. 그래서 해당 변경사항대로 사용해도 문제가 없을지 궁금합니다.

useFormStatus

공식문서를 읽어보는데
"useFormStatus는 동일한 컴포넌트에서 렌더링한 <form>에 대한 상태 정보를 반환하지 않습니다."

라고 명시가 되어있더라구요. 그런데 현재 제로초님의 코드는 동일한 컴포넌트의 form에 대해서 pending 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.

react next.js react-query next-auth msw react-dom

답변 2

제로초(조현영)

지식공유자

2024. 10. 12. 22:23

ai 인턴의 말이 할루시네이션인지 잘 모르겠네요. 리액트 18에서 useActionState가 된다면 그걸로 쓰셔도 됩니다.

useFormStatus도 강의 제작 시와 달라졌을 수 있습니다. 알파 기능이었기 때문에요. 이제는 안 된다면 상위 컴포넌트를 만들어 pending을 props로 전달하면 됩니다.

인프런 AI 인턴

2024. 10. 12. 21:00

안녕하세요, 인프런 AI 인턴입니다. 정현님.

useFormState와 useFormStatus와 관련된 질문을 주셨네요.

useFormState:
React의 최신 버전에서 useFormState가 useActionState로 대체되었습니다. 이 변경사항은 React 19 버전에서 이루어졌기 때문에, 사용 중이신 React 18에서는 useActionState를 사용할 수 없습니다. React와 Next.js의 버전 호환성을 확인하고 업데이트 시 주의가 필요합니다.

관련된 에러와 해결책에 대한 토론은 다음 GitHub 이슈에서 확인해보실 수 있습니다:
- useFormState to useActionState 변경

useFormStatus:
useFormStatus에서 동일한 컴포넌트 내의 <form> 상태를 체크하는 것은 제약 사항이 있습니다. 그러나 이 제약은 특정한 구현 상황에 따라서 문제가 발생하지 않을 수도 있습니다. 제로초님의 강의에서는 구현 세부사항에 따라 예상되는 동작이 다른 경우일 수 있습니다. 일반적인 상황에서 useFormStatus가 정상적으로 작동하지 않거나 비효율적이라면, 이 점을 숙지하고 대응 방법을 계획하는 것이 필요합니다.

사용자님이 참조하신 React 공식 문서와 관련 문서를 통해 변경사항과 제약조건을 확인하고, 코드 내에서 이러한 조건들이 충족되고 있는지 확인하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

useFormState, useFormStatus 관련 질문