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

안녕하세요 이정환입니다.

예리한 질문 감사합니다 👀

우선 리뷰를 작성하는 ReviewEditor 컴포넌트에 상호작용이 존재하는 것은 맞습니다. 버튼을 클릭하면 리뷰가 새롭게 추가되어야 하니까요

그러나 ReviewEditor에서의 상호작용은 대개 우리가 일반적으로 웹에서 일컫는 상호작용과는 다르게 자바스크립트를 통해 이루어지지 않습니다.

구체적으로 말씀드리자면, ReviewEditor 컴포넌트에서는 <form> 태그를 통해 상호작용을 진행하는데 이 <form> 태그는 HTML 고유의 기능입니다. 따라서 동작을 위해 어떠한 자바스크립트 코드도 필요로 하지 않습니다. 마치 <a> 태그를 통해 페이지를 이동하는 것 역시 상호작용이지만, 자바스크립트의 기능을 사용하지 않는 것과 동일합니다.

따라서 결론적으로 ReviewEditor 컴포넌트는 별도의 자바스크립트를 필요로 하지 않습니다. 그러므로 브라우저에 이를 위한 JS Bundle을 전달할 필요도, 하이드레이션 과정을 거칠 필요도 없습니다. 이런 이유로 이 컴포넌트를 서버 컴포넌트로 설정해 둔 것 입니다.

정리하자면 "자바스크립트를 이용한 상호작용"이 필요한 컴포넌트 만 클라이언트 컴포넌트로 전환해야 한다! 라고 이해해 주시면 감사하겠습니다 🙇‍♂

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

Next.js 강의에서 클라이언트 컴포넌트와 서버 컴포넌트의 개념을 이해하는 데 혼란이 있으신 것 같습니다. 질문 주신 내용을 바탕으로 관련 사항을 설명드리겠습니다.

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

• 클라이언트 컴포넌트: 클라이언트 컴포넌트는 사용자와의 지속적인 상호작용(이벤트 처리, 데이터 변경 등)이 필요한 UI 요소를 관리합니다. 예를 들어, 사용자 입력을 받아 지속적으로 상태가 변화하는 폼이나 버튼의 클릭 이벤트를 처리할 때 사용됩니다.

• 서버 컴포넌트: 서버 컴포넌트는 서버에서 데이터를 미리 렌더링하고 이를 전달하는 데 특화된 컴포넌트입니다. 즉, 데이터가 미리 준비되고 정적이거나 초기 로딩 시에만 필요로 하는 경우 서버 컴포넌트를 사용하게 됩니다.

리뷰 기능의 경우

리뷰 작성 기능은 대개 사용자 입력과 상태 저장, 검토 후 제출이라는 일련의 상호작용이 개입되므로, 이러한 상호작용들이 포함된 부분들은 클라이언트 컴포넌트로 관리해야 합니다. 그러나, 만약 리뷰를 서버에서 미리 로드하고 그 데이터를 보여주는 것에 중점을 둔다면, 서버 컴포넌트로도 구현 가능할 수 있습니다.

다만, 리뷰의 작성 및 제출 과정은 클라이언트 컴포넌트로 처리하는 것이 일반적입니다. 이는 사용자의 즉각적인 입력 처리와 피드백 제공, 비동기 처리 등을 효과적으로 이루어질 수 있게 하기 위함입니다.

보다 구체적인 설명은 관련된 유사 질문에 대한 답변을 참고하시면 도움이 됩니다:

• 클라이언트 컴포넌트가 서버에서 어떻게 렌더링되는지 궁금합니다!: 클라이언트 및 서버 컴포넌트의 차이와 상호작용 처리에 대한 설명입니다.
  

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