MouseNext/AppRouter - 2. 컴포넌트

컴포넌트

Next.js의 page.tsx로 된 파일은 기본적으로 서버컴포넌트이다. 그렇기 때문에 콘솔을 찍어봐도 클라이언트가 아닌 서버쪽에 콘솔이 찍히고, useEffect와 같은 react hook을 사용할 수 없다. 그럴때 최상단에

"use client"

라는 문자열을 입력하면 이 컴포넌트는 클라이언트 컴포넌트가 된다.
Next.js는 번들러에의해 클라이언트 컴포넌트가 한번 더 실행되므로 콘솔에 찍힌 값은 서버와 클라이언트 2군데에서 볼 수 있다.

또한 클라이언트 컴포넌트 사이 서버 컴포넌트를 두면 그 컴포넌트를 자동으로 클라이언트 컴포넌트로 바꿔준다.

export const ClientComponent = () => {
	return <ServerComponent/> // 자동으로 클라이언트 컴포넌트로 변환됨 
}

하지만 그게 싫다면 children으로 특정 컴포넌트 내에 넣어주면 된다.

<ClientComponent>
  <ServerComponent/> // 클라이언트 컴포넌트로 변하지 않음
<ClientComponent/>

또한 서버컴포넌트에서 클라이언트컴포넌트로 함수를 props로 넘길 수 없다.

RSC Payload , JSBundler

네트워크탭에서 페이지를 이동할 때 확인 할 수 있다

RSC Payload - 1?_rsc=yx7qw (서버 컴포넌트)
JSBundler - page.js (클라이언트 컴포넌트)

Router

AppRouter 에서 페이지를 이동시키는 방법

import {useRouter} from "next/navigation";

const router = useRouter();
const searchParams = useSearchParams();
const q = searchParams.get("q"); // 쿼리스트링 구하는법

const onSubmit = () => {
  router.push("/home") // /home으로 이동
}

useEffect(()=> {
	setSearch(q || ""); // 경로가 변할때마다 search를 변경
},[q]);