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

안녕하세요 김민규님 이정환입니다.

결론부터 말씀드리면 useActionState는 클라이언트 컴포넌트에서만 쓸 수 있고, 서버 컴포넌트에서는 직접적으로 사용할 수 없습니다.

useActionState가 반환하는 상태(State)는 클라이언트의 동작에 따라(버튼을 클릭함 등...) 달라져야 합니다. 따라서 클라이언트 컴포넌트에서만 사용 가능하며 서버 컴포넌트에서는 정상적으로 작동하지 않습니다.

간단히 정리하자면 서버 컴포넌트는 초기 렌더링(접속 요청시에 초기 HTML을 생성하는 일)만을 담당하기에, 사용자의 동작에 따라 값이 달라지는 대부분의 React Hooks(useEffect, useState, useActionState)는 정상적으로 동작하지 않습니다.

안녕하세요, 인프런 AI 인턴입니다. 김민규 (강근)님!

Next.js의 컴포넌트 구조와 훅의 사용에 대한 질문을 주셨군요. Next.js에서는 서버 컴포넌트와 클라이언트 컴포넌트가 각각의 역할을 가지고 있으며, 특정 훅 사용 여부에 따라 선택해야 하는 컴포넌트가 달라집니다.

서버 컴포넌트와 클라이언트 컴포넌트의 차이

• 서버 컴포넌트는 서버측에서 렌더링이 이루어지며, 데이터를 가져오거나 서버측에서만 필요한 로직을 수행할 때 사용됩니다. 이들은 직렬화되어 클라이언트로 전송되며, 클라이언트 쪽에 React의 부수효과나 상태 관리가 필요하지 않을 경우 유용합니다.

• 클라이언트 컴포넌트는 브라우저에서 실행되는 코드로, useEffect, useState와 같은 훅을 사용할 수 있습니다. 이는 주로 UI의 상호작용을 위해 사용됩니다.

useActionState 훅의 사용

useActionState 훅에 관해서는 정확히 어떤 동작을 수행하는 훅인지 강의 문맥이 없어서 일반적 React 컨텍스트에서 설명드리자면, 이 이름의 훅은 공식적인 훅이 아니므로, 커스텀 훅으로 가정하고 답변드리겠습니다.

커스텀 훅이 서버 사이드 실행에 이상이 없는 경우, 즉 브라우저 환경이 아닌 곳에서도 정상 작동할 수 있다면 서버 컴포넌트에서 사용할 수 있습니다. 하지만 클라이언트에서만 동작하도록 설계된 훅(useEffect 등과 같이 클라이언트 측 효과에 의존하는 경우)을 사용할 때는 클라이언트 컴포넌트로 분리해야 합니다.

추가적인 고려 사항

만약 useActionState가 상태 관리를 하기 위해 useState를 사용하는 정도라면, 서버 컴포넌트에서도 초기 값 설정을 통해 활용할 수 있습니다. 그러나 최종적으로 훅의 내부 로직과 강의에서의 설명에 따라 클라이언트 컴포넌트로 사용하는 것이 추천될 수 있습니다.

더 구체적인 구현 및 이유는 이 관련 질문에서도 살펴볼 수 있습니다. 이 게시물은 클라이언트 컴포넌트의 렌더링과 훅 사용에 대해 심도 있는 정보를 제공하므로 해당 문서를 참조하시면 추가적인 이해에 도움이 될 것입니다.

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