인프런 커뮤니티 질문&답변
작성한 질문수
클라이언트 컴포넌트로의 전환
해결된 질문
작성
·
78
·
수정됨
0
강사님 안녕하세요.
학습을 거의 끝낸 상태라 거의 마지막 질문이 될 것 같기도 한데요^^
클라이언트 컴포넌트는 서버 컴포넌트를 Import 할 수 없기 떄문에 Next 는 서버 컴포넌트를 클라이언트 컴포넌트로 동작시킨다고 배웠습니다.
그런데 만약 이러한 서버 컴포넌트에 async 방식의 api 코드가 포함되어 있는 경우에는 이런 코드가 클라이언트 방식으로 동작하면 문제가 발생할 것 같은데요.
결국, 이런 상황에서는 서버 컴포넌트를 그대로 두어서는 안되고 강의에서 설명하신 합성 방식으로 변경을 하거나 아니면 해당 서버 컴포넌트의 API 로직을 react-query 나 useEffect 훅을 이용해서 실행될 수 있는 클라이언트 컴포넌트로 리팩토링을 해야만 되는거 같은데 제가 올바로 이해한 게 맞을까요?
답변 2
0
안녕하세요 이정환입니다.
네 맞습니다. 비동기 작업이 필요한 컴포넌트라면 클라이언트 컴포넌트로 처리하기 보다는 말씀하신 방법처럼 서버측에서 처리한 다음 결과값만 children으로 넘겨주거나, 비동기 작업 자체를 클라이언트 작업으로 전환하는 방법을 채택하시는게 좋습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 아리마님.
Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트 간의 상호작용에 대한 질문을 주셨네요. 질문해 주신 내용을 바탕으로 답변 드리겠습니다.
클라이언트 컴포넌트의 Server Component Import 제약
- 클라이언트 컴포넌트가 서버 컴포넌트를 import할 수 없는 이유: Next.js에서는 클라이언트 컴포넌트(
"use client";를 포함한 컴포넌트)가 서버 컴포넌트를 직접 import할 수 없습니다. 왜냐하면, 클라이언트 측에서는 모든 코드가 브라우저 환경에서 동작해야 하기 때문입니다. 서버 컴포넌트를 포함하면 서버 측에서 실행해야 하는 코드가 브라우저로 전달될 수 있는 위험이 생기기 때문입니다.
서버 컴포넌트 내의 비동기(API) 코드
서버 컴포넌트는 서버 측에서 데이터를 미리 fetch하고, 그 데이터를 바탕으로 컴포넌트를 렌더링합니다. 비동기 처리 역시 서버에서 실행되므로 클라이언트와는 무관하게 안전하게 처리될 수 있습니다.
클라이언트에서 비동기로 처리해야 하는 경우: 서버 컴포넌트를 클라이언트에서 사용해야 한다면, API 호출을 클라이언트 컴포넌트에서 처리해야 합니다. 이때,
react-query나useEffect를 활용하여 클라이언트 쪽에서 데이터를 처리하고 관리할 수 있습니다. 이는 클라이언트에서 데이터 변화를 쉽게 관리하고, 리렌더링을 최소화하는데 도움을 줍니다.
추천 참고사항
합성과 리팩토링: 말씀하신 것처럼 API 호출 로직을 리팩토링하여 클라이언트에서 적절하게 실행될 수 있도록 변경하는 방법이 효과적입니다.
관련 질문 및 답변 링크:
- Next.js와 SSR/SSG 사용 원칙: SSR과 클라이언트 컴포넌트의 사용 원칙에 관한 설명이 담긴 링크입니다.
- React 상태 관리의 중요성: React에서의 상태 관리 및 클라이언트와 서버 사이의 역할 분리에 대한 논의 링크입니다.
- Next.js와 SSR/SSG 사용 원칙: SSR과 클라이언트 컴포넌트의 사용 원칙에 관한 설명이 담긴 링크입니다.
협업과 리소스 활용 면에서 Next.js는 여전히 강력한 도구입니다. 아리마님의 이해가 정확하며, 추가적인 도입 방법이나 활용 방법에 대해서는 강의 자료 및 관련 문서를 참고하시길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.