GET, POST 그리고 path parms와 query params

요즘 API 붙이는 작업이 한창이다. GET, POST 메서드를 어떻게 적절하게 사용하고 어떤건 path로 받고 어떤건 query로 받아야하는지 고민하는 순간이 많다.
HTTP 요청에서 GET과 POST 메서드, 그리고 path 파라미터와 query 파라미터의 차이를 이해하는 것은 API 작업에서 매우 중요하다.

🤔 Get, post, 그리고 언제 path 파라미터로 받고 언제 query 파라미터로 받아야 할까?

1. GET과 POST의 차이

• GET: 데이터를 가져올 때 사용하는 메서드입니다. 서버에서 정보를 받아오는 용도로 쓰며, 요청의 응답으로 데이터를 받습니다. GET 요청에서는 요청 바디가 없고, 필요한 데이터는 주로 URL의 쿼리 파라미터로 전달됩니다. 예를 들어, 특정 사용자의 정보를 불러오는 경우 GET /users?id=123처럼 사용합니다.

• POST: 데이터를 생성하거나 서버에 전송할 때 사용합니다. 클라이언트에서 서버로 데이터를 보낼 때는 주로 요청 바디에 넣습니다. 예를 들어, 새로운 사용자를 생성할 때 POST /users로 요청을 보내고, 바디에 사용자 정보를 포함시킵니다.

2. Path 파라미터와 Query 파라미터

• Path 파라미터: 경로 자체에 포함된 파라미터로, 특정 리소스를 식별할 때 사용합니다. 예를 들어, 특정 사용자 ID의 정보를 요청할 때 GET /users/123처럼 123이 path 파라미터입니다. 보통 자원을 식별하는 데 필요한 필수 파라미터일 때 사용됩니다.

• Query 파라미터: URL 뒤에 ?로 시작하여 추가하는 방식이며, 리소스를 검색하거나 필터링할 때 주로 사용됩니다. 필수적이지 않은 추가 정보, 검색 조건, 페이지네이션 등이 필요할 때 사용됩니다. 예를 들어, 사용자를 검색하면서 페이지네이션을 적용할 때는 GET /users?page=2&limit=10과 같은 쿼리 파라미터를 추가할 수 있습니다.

요약

• Path 파라미터: 리소스를 식별하는 필수적인 정보 (예: GET /users/123에서 123은 특정 사용자 식별).
• Query 파라미터: 필수적이지 않은 추가 옵션 정보 (예: GET /users?search=name에서 search=name은 검색 옵션).
  실제로 사용할 때는 API 문서나 명세를 보고 어떤 경우에 어떤 파라미터를 써야 하는지 결정하는 것도 중요!

🤔 그러면 저 파라미터값은 어디서 불러오는걸까?

파라미터 값은 주로 사용자의 상호작용이나 애플리케이션 내부의 로직에서 생성됩니다. 주로 세 가지 상황에서 파라미터 값이 만들어집니다:

1. 사용자 입력
사용자가 입력하는 값을 기반으로 API를 호출할 때 파라미터 값을 생성할 수 있습니다. 예를 들어, 검색 창에 특정 키워드를 입력하면, 이 키워드를 query 파라미터로 추가해 GET /users?search=keyword처럼 요청합니다.
로그인, 등록 폼 등의 데이터는 사용자가 직접 입력해 POST 요청의 body로 보내는 경우가 많습니다.

2. 애플리케이션 내부 로직
애플리케이션 내부에서 상태 관리, 로컬 저장소, 혹은 다른 페이지에서 전달된 값 등을 기반으로 파라미터를 생성할 수 있습니다.
예를 들어, 상태 관리 라이브러리(Zustand 등)로 로그인한 사용자의 ID를 저장해 두었다가 다른 페이지에서 path 파라미터로 사용할 수 있습니다. GET /users/{userId}처럼 로그인한 사용자 ID를 특정 API 요청에 넣어 보내는 식입니다.

3. 라우팅과 URL 파라미터
URL을 통해 이동할 때 파라미터를 넘겨주기도 합니다. 예를 들어, /profile/123로 이동하면 123을 path 파라미터로 사용할 수 있습니다.
페이지 간 값 전달이 필요할 때 query 파라미터도 자주 사용됩니다. /products?category=electronics처럼 페이지 간 파라미터를 전달해 해당 정보를 받아서 API에 활용할 수 있습니다.
각 파라미터의 값은 라우팅 시 URL에서 추출하거나, 상태 관리 라이브러리에서 불러오거나, 특정 페이지나 컴포넌트에서 직접 값을 주입하는 식으로 접근하게 됩니다. React의 경우 useParams, useLocation 같은 hook을 통해 path나 query 파라미터 값을 쉽게 가져올 수 있습니다.

🤔 그러면 예를 들어 검색창에 번호를 입력하고 그걸 파라미터로 가져오면 그건 쿼리로 받아야 할까?

검색창에 번호를 입력하고 그 값을 파라미터로 가져온다면 쿼리 파라미터로 받는 것이 일반적입니다.
검색이나 필터링 기능을 구현할 때는 쿼리 파라미터를 사용하는 것이 REST API 설계에서 권장됩니다. 쿼리 파라미터는 선택적인 값으로, 필요한 경우에만 추가할 수 있기 때문입니다.
검색창에 입력하는 값이 특정 자원을 식별하는 것이 아닌, 여러 리소스를 필터링하기 위한 조건이기 때문에, URL 경로에 포함하는 path 파라미터보다는 쿼리 파라미터가 적합합니다.

예를 들어, 사용자가 특정 ID로 검색하고 싶다면:

// 사용자가 ID 123을 검색창에 입력한 경우
GET /users?searchId=123

렇게 쿼리 파라미터로 요청을 보내면 searchId를 받아서 서버에서 필터링하거나 조건에 맞는 데이터를 반환하게 됩니다.

구현 예시 (React)

React에서 검색창에 입력한 값을 쿼리 파라미터로 가져오려면 다음과 같은 구조가 됩니다:

사용자가 입력한 값을 상태로 관리합니다.
버튼 클릭 시 그 값을 쿼리 파라미터로 요청합니다.

import React, { useState } from 'react';

function SearchComponent() {
  const [searchId, setSearchId] = useState('');

  const handleSearch = () => {
    // 검색창에 입력한 값을 쿼리 파라미터로 요청
    fetch(`/users?searchId=${searchId}`)
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  };

  return (
    <div>
      <input 
        type="text" 
        value={searchId} 
        onChange={(e) => setSearchId(e.target.value)} 
        placeholder="Enter ID to search"
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
}

export default SearchComponent;

이 예시에서는 검색창에 입력한 값이 searchId라는 쿼리 파라미터로 API에 전달됩니다.

🍃 추천강좌 : 김영한의 모든 개발자를 위한 HTTP 웹 기본 지식 (인프런)
https://inf.run/mHHd7