1. 개요

특정 데이터를 서버에 전달하거나 특정 정보를 요청하기 위해 사용된다. 보통 URL의 끝에 ? 기호 뒤에 붙으며, key=value 형식으로 데이터를 표현합니다. 여러 값을 전달할 때는 &로 구분한다.

2. 예시

https://example.com/search?query=apple&sort=asc&page=2

• query=apple: 검색어는 apple.
• sort=asc: 정렬 순서는 asc(오름차순).
• page=2: 페이지 번호는 2.

3. 특징

• 클라이언트와 서버 간 데이터 전송: 서버로 데이터를 전달하거나 특정 요청을 처리할 때 사용
• URL 인코딩: 특수 문자나 공백은 반드시 URL 인코딩되어야 합니다. 예를 들어, 공백은 %20으로 변환
• 가독성: Query string은 URL에 명시적으로 표현되므로 디버깅에 유용하지만, 민감한 데이터를 포함하면 보안 이슈가 발생

app router에서의 사용

export default async function page({searchParams} : {searchParams: Promise<{q:string}>;}) {
    const {q} = await searchParams
    return (
        <div>
            페이지 : {q}
        </div>
    )
}

• async : 비동기로 불러오기 위해 사용 - await를 사용가능하게 해줌
• {searchParams} : searchParams의 객체로부터 쿼리스트링의 값을 받아 올 수 있다.
• {searchParams: Promise<{q:string}>;} : ts 적용
• const {q} = await searchParams : value 값을 가져온다.