[Next JS] queryString

 

 

  1. QueryString

 

---

방법

  1. QueryString

'?q=한입' 요런 식으로 전달되는 쿼리 스트링을 이 페이지 컴포넌트 내부에서 사용하는 방법을 살펴봤다.

 

쿼리 스트링의 경우에는 이렇게 경로 끝에 물음표와 함께 명시가 되기 때문에 라우팅에는 전혀 영향을 주지 않아요

=> 그래서 프로젝트에서도 별도로 쿼리 스트링을 위해 폴더 구조를 변경하거나 하지 않는다.

 

쿼리 스트링을 꺼내 쓰려면 App Router 방식에서는 해당 컴포넌트 Props를 통해 꺼내 쓴다.

=> App Router의 Next 앱에서는 쿼리 스트링이나 URL 파라미터와 같은 경로상에 포함되는 값들은 컴포넌트에게 모두 props로써 전달이 된다.

 

props를 받아와서 console.log() 로 출력을 해주면,

- searchParams: Promise { } : searchParams라는 값이 Promise 객체로 저장 돼 있는 것을 확인 O

- params: Promise { } : url 파라미터인 params의 값도 Promise 객체로 저장 돼 있는 것을 확인 O

 

props로 전달이 되고 있는 것들을 꺼내서 활용하고자 한다면, => 타입 정의부터!

(ex)

1. page.tsx 컴포넌트의 props로 "searchParams" 라는 객체가 담겨있는 것을 확인했는데,

2. "searchParams"의 타입은? => Promise 객체형태!

3. 그 안에는 q:string 이라는 결과 값을 포함하고 있다.

# 1. props 타입 정의

export default function Page({ searchParams }:{ searchParams:Promise<{q:string}> }) {
  return (
    <div>
      search 페이지
    </div>
  );
}

// { searchParams } 라는 값은 { searchParams:Promise } Promise라는 객체형태이고
// 그 안에 <{q:string}>이라는 결과값을 가지고 있다.

-----

#2. 구조분해 할당으로 q 꺼내오기

export default function Page({ searchParams }:{ searchParams:Promise<{q:string}> }) {
  
  const { q } = await searchParams; 
  // 구조분해 할당을 이용해서 await search params로부터 이 q라는 값을 꺼내오도록 사용하면 된다
  
  return (
    <div>
      search 페이지: {q}
    </div>
  );
}

-----

# 3. async 추가 + { q } 사용

export default async function Page({ searchParams }:{ searchParams:Promise<{q:string}> }) {
  const { q } = await searchParams; 

  return (
    <div>
      search 페이지: {q}
    </div>
  );
}

 

 

+ 어떻게 함수형 컴포넌트에 async를 사용할 수 있는가?

=> 리액트의 서버 컴포넌트이기에 가능!

=> 서버 컴포넌트는, 서버 측에서 사전 렌더링을 위해서 딱 1번 실행이 되기에 그 시점에 비동기적으로 실행돼도 문제X

(추후 보강)