useFormState, useFormStatus 관련 질문
387
작성한 질문수 4
[섹션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 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.
답변 2
1
ai 인턴의 말이 할루시네이션인지 잘 모르겠네요. 리액트 18에서 useActionState가 된다면 그걸로 쓰셔도 됩니다.
useFormStatus도 강의 제작 시와 달라졌을 수 있습니다. 알파 기능이었기 때문에요. 이제는 안 된다면 상위 컴포넌트를 만들어 pending을 props로 전달하면 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. 정현님.
useFormState와 useFormStatus와 관련된 질문을 주셨네요.
- useFormState:
React의 최신 버전에서useFormState가useActionState로 대체되었습니다. 이 변경사항은 React 19 버전에서 이루어졌기 때문에, 사용 중이신 React 18에서는useActionState를 사용할 수 없습니다. React와 Next.js의 버전 호환성을 확인하고 업데이트 시 주의가 필요합니다.
관련된 에러와 해결책에 대한 토론은 다음 GitHub 이슈에서 확인해보실 수 있습니다:
- useFormState to useActionState 변경
- useFormStatus:
useFormStatus에서 동일한 컴포넌트 내의<form>상태를 체크하는 것은 제약 사항이 있습니다. 그러나 이 제약은 특정한 구현 상황에 따라서 문제가 발생하지 않을 수도 있습니다. 제로초님의 강의에서는 구현 세부사항에 따라 예상되는 동작이 다른 경우일 수 있습니다. 일반적인 상황에서useFormStatus가 정상적으로 작동하지 않거나 비효율적이라면, 이 점을 숙지하고 대응 방법을 계획하는 것이 필요합니다.
사용자님이 참조하신 React 공식 문서와 관련 문서를 통해 변경사항과 제약조건을 확인하고, 코드 내에서 이러한 조건들이 충족되고 있는지 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
88
2
깃에 소스코드를 찾을 수 없습니다.
0
121
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
100
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
119
2
css 라이브러리 추천 부탁드립니다
0
153
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
137
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
121
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
177
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
192
3
폴링이 필요없는 이유
0
101
2
next Request Memoization과 react cache
0
114
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
90
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
174
2
프레임워크 여론 파악법
0
128
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
109
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
110
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
70
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
135
2
next.js 에서 로그인에 관하여
0
144
1
Next의 route handler에 대한 질문이 있습니다.
0
102
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
103
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
88
2
vanilla-extract 못찾는 문제
0
235
2
fetch 캐싱과 revalidate 관련
0
93
2