쿼리 파라미터 활용법

Axios에서 Query Parameter를 추가하려면 params 옵션을 사용하면 됩니다. params는 Axios 요청 구성에서 제공되며, 자동으로 URL에 쿼리 문자열로 추가됩니다.

다음은 예제입니다:

GET 요청에서 Query Parameter 추가

javascript
코드 복사
import axios from 'axios';

axios.get('https://example.com/api', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

위의 요청은 다음과 같은 URL로 변환됩니다:

arduino
코드 복사
https://example.com/api?key1=value1&key2=value2

POST 요청에서도 Query Parameter를 추가할 수 있습니다

POST 요청의 URL에 쿼리 파라미터를 추가하고 싶다면, 동일한 params 옵션을 사용할 수 있습니다.

javascript
코드 복사
axios.post('https://example.com/api', 
  {
    data: {
      field1: 'value1',
      field2: 'value2'
    }
  }, 
  {
    params: {
      key1: 'value1',
      key2: 'value2'
    }
  }
)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

Query Parameter를 수동으로 추가하는 방법

URL을 직접 작성해서 쿼리 파라미터를 붙일 수도 있습니다:

javascript
코드 복사
axios.get('https://example.com/api?key1=value1&key2=value2')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

하지만 params를 사용하는 것이 더 깔끔하고 유지보수에 용이합니다.