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

화해방님의 프로필 이미지
화해방

작성한 질문수

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

서버 컴포넌트에서 Server Actions 사용하기

server action과 useState에 관해 질문드립니다!

작성

·

526

·

수정됨

1

안녕하세요 제로초님 소중한 강의 감사히 보고있습니다.
다름이 아니라 강의를 잘 이해하다가 Server action 부터 잘 와닿지가 않아서 질문드립니다.

SignupModal.tsx 를 server component로 변경하는 과정을 보고있는데요.

리액트에서는 input 태그의 입력값을 useState와 onChange로 관리하지 하지 않으면, "A component is changing an uncontrolled input to be controlled" 와 같은 에러를 띄웠기 때문에 모든 input 값은 useState를 통해 관리하는게 바람직하다고 생각해왔습니다. 리액트 기반으로 동작하는 next도 당연히 그럴 줄 알았습니다.

그런데 센세이셔널하게 server action에서 그게 통째로 사라져 버리니 매우 혼란스럽습니다. 단지 서버 컴포넌트로 바뀌었기 때문에 없어져도 상관없는건가요?
input태그 입력은 데이터가 실시간으로 입력되는 과정이니까 클라이언트 컴포넌트에서 이루어지는게 맞다고 생각을 해와서그런지 쉽게 받아들여지지 않습니다.

또한 말씀하신 방법을 사용했을 때, 만약 입력값 유효성 검사에 있어서 단순히 입력 유무를 확인하는 required 속성 말고도, 입력값을 실시간으로 체크해 유효성 검사 결과를 로직(ex) '사용할 수 있는/없는 비밀번호입니다'를 실시간으로 보여주는 helperText )같은 경우는 구현이 불가능한게 되는 것인지 궁금합니다.

모든 컴포넌트를 다 sever action을 활용하는 방식으로 바꾼다면, useState는 사용될 일이 거의 없어지는 건가요..?

답변 2

2

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

서버 액션은 그냥 html form을 통째로 서버로 보내는 거라고 보시면 됩니다. react가 없었던 때를 기억해보시면 됩니다. action에 적힌 주소로 폼을 통째로 보내던 그냥 그것입니다.

강의에 나오듯 useFormState 통해서 최종적으로 검증하시거나 개별 input을 client component로 만드시면 됩니다.

서버 액션 자체가 그닥 쓸모있는 기능이 아니라서 그냥 예전 방식대로 하시는 걸 추천드립니다.

0

화해방님의 프로필 이미지
화해방
질문자

답변 감사합니다!

화해방님의 프로필 이미지
화해방

작성한 질문수

질문하기