[NextJS] 20260426 용어에 대한 정리

server-only

이론적으로 좀 정리가 필요한것들이 있어 정리해본다.

'use server'를 쓰면 반드시 server에서만 돌아가는가??!!

아니다...

그렇지 않다가 답이다.

이럴 경우에는 'server-only'를 사용해야 한다.

 

server-only는 서버 전용 로직이나 민감한 데이터가 사이드로 유출되는것을 방지 하기 위한 도구

npm install server-only

사용방법 import ‘server-only’

참고로 client-only도 있음

 

searchParams

이 값은 언제 받는건가에 대한 궁금증이 생겼다.

서버 사이드의 값과 클라이언트 사이드에 따라 이름이 달라진다.

 

서버 사이드에서는 다음과 같다.

서버 컴포넌트(page)는 브라우저에서 보낸 이 값들을 인자로 직접 받을 수 있다 Page({ searchParams }) {

서버에서 이 값을 읽어 즉시 실행, 조건부 렌더링이 가능하다.

 

useSearchParams

클라이언트 사이드에서는 위와 같은 이름으로 값을 전달 받는다.

클라이언트 컴포넌트에서는 훅(Hook)을 사용하여 이 정보를 가져온다.

{useSearchParams } from ‘next/navigation’

const searchParams = useSearchParams(); const query = searchParams.get(’query’);

useRouter

페이지 이동과 주소 변경을 담당하는 핵심 도구 클라이언트 컴포넌트(‘use client’)에서 사용자의 액션에 따라 프로그램 방식으로 페이지를 조작

{useRouter} from ‘next/navigation’;

const router = useRouter();

router.push(’/board’);

router.push(href) 새로운 url. 히스토리 router.replace(href) 현재 페이지를 덮음. 로그인 화면 router.refresh() 현재 페이지의 데이터를 새로 가져옴. 상태는 유지하고 서버 컴포넌트만 업데이트 함 router.back() 뒤로가기 router.forward() 앞으로 가기

단순이동은 Link를 쓰고, 특정 로직 이후 이동해야 할때만 useRouter를 사용할것

 

useFormState → useActionState로 변경되었다.

서버액션의 결과값을 클라이언트 컴포넌트에서 쉽게 받아 처리할 수 있게 해주는 훅

쉽게 말하면 폼액션을 처리하여 결과를 전달해 주는 역할

 

useState 

화면을 바꾸기 위해 기억해야 할 값

‘use client’

const [count, setCount] = useState(0) setCount(count + 1);

브라우저의 메모리를 사용한다.

useState, useFormState → useActionState

useEffect

리액트 컴포넌트가 화면에 나타나거나(mount)… 등을 정의하는 훅이다.

부수적인 작업들을 렌더링이 끝난 시점으로 몰아주는 역할

useEffect(() ⇒ { }, []);

빈배열 컴포넌트가 처음 나타날때만 실행

 

hook

함수형 컴포넌트가 클래스처럼 복잡한 기능(상태관리, 생명주기 등)을 사용하기 위해 Hook을 걸어주는 도구

함수형 컴포넌트는 일회성 함수이나, useState, useEffect같은 훅을 걸어 필요한 기능을 사용할 수 있다.