질문&답변
서버컴포넌트, 클라이언트 컴포넌트
감사합니다 ! children으로 한번 다시 시도해보겠습니다. 지금 제가 이해한 선에서 서비스를 만든다면 뭔가 리엑트에 비해 한 컴포넌트안에 코드가 길어지고, 클릭이 동작하는 작은 컴포넌트들이 굉장히 많아져야 페이지 구현이 가능하려나 싶네요...!!
- 좋아요수
- 0
- 댓글수
- 6
- 조회수
- 684
질문&답변
감사합니다 ! children으로 한번 다시 시도해보겠습니다. 지금 제가 이해한 선에서 서비스를 만든다면 뭔가 리엑트에 비해 한 컴포넌트안에 코드가 길어지고, 클릭이 동작하는 작은 컴포넌트들이 굉장히 많아져야 페이지 구현이 가능하려나 싶네요...!!
질문&답변
ssr을 쓴다는 게 무슨 의미인지 잘 모르겠습니다. =>> 위에 말씀드린 형태의 서비스라면 nextjs가 아닌 react로 쓰는게 더 나은지 질문드린거에요 ! 많은 페이지들이 있고 많은 데이터패치가 일어나는 서비스라 빠른 렌더링을 위해 nextjs를 쓰고 싶었어요. 그런데 웹뷰 형태로 만들고, 상단 헤더가 페이지마다 다른 함수가 동작시키고 싶거든요. 그러려다보니 다 클라이언트 컴포넌트로 전환을 시키게 되더라구요. 제가 구현하고 싶은 프로젝트는 nextjs를 쓰는 의미가 없는 프로젝트 일까 싶어서 질물드린겁니다 : )
질문&답변
글 작성중에 답변을 달아주셨네요. 위에 코드 참고해서 봐주세요! mainheader라는 컴포넌트는 클릭버튼이 있는 헤더인데요. 모든 페이지에 이 mainheader가 들어가게 하고 싶고, 페이지마다 mainheader에 있는 클릭버튼 함수가 다르게 만들어야 해서요 ! 일반적으로 리액트에서는 상위페이지에 클릭함수를 가지고 하위컴포넌트에 함수를 props로 보내잖아요? 그런데 그렇게 하려다보니, 모든 페이지가 use client를 작성하지 않으면 페이지 빌드가 안되더라구요ㅠ
질문&답변
빠른답변 감사합니다. 1번답변. 'use client'로 상위 페이지를 클라이언트컴포넌트로 만들었는데, 하위컴포넌트들 중에 몇개라도 클라이언트 컴포넌트로 전환되지 않은 컴포넌트가 있다면 도움이 되는건지를 묻고 싶었습니다 2번답변 . ts파일에 작성한 getTrends를 불러오는 아래 페이지는 결국 클라이언트컴포넌트입니다. 아래는 제가 커스텀해서 만들어본 페이지 인데요 , 페이지가 100개가 있는 프로젝트인데 아래 코드처럼 useclient로 만든 페이지들만 100개가 있으면 ssr을 쓸필요가 있는지 궁금합니다 . "use client"; import MainHeader from "@app/_component/MainHeader"; import { API_URL, Axios } from "@app/_lib/axios"; import { getData } from "@app/_lib/getData"; import { useQuery } from "@tanstack/react-query"; export default function Home({ serverData }: any) { const { data } = useQuery({ queryKey: ["trends"], queryFn: getData, }); const clickLeft = () => { console.log("11"); }; const clickRight = () => { console.log("22"); }; return ( ); }