[React] React 에서 Axios 사용하기

[React] React 에서 Axios 사용하기

 

Axios 란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 모두 사용할 수 있다. 브라우저 환경에서는 XMLHttpRequests 를 생성하고, node.js 환경에서는 http 요청 생성한다.

Axios는 백엔드와 통신하기 위해 AJAX 요청을 만들고 응답을 다루는 데에 사용된다. 다른 비동기 통신 api 보다 사용하기 쉬워 백엔드와 통신하기에 수월하다.

Axios 를 사용하면 좋은점

Axios 는 XMLHttpRequest, Fetch API 등 다른 HTTP 클라이언트와 비교할 때 좋은 점이 있다.

• 간단해서 HTTP 요청을 보내고 응답하는 것이 쉽다.
• 서버에서 받은 응답을 자동으로 JSON 으로 파싱한다.
• 요청이나 응답을 가로채서 중간에 로직을 추가하거나 헤더를 수정하는 작업을 할 수 있다.
• 다양한 에러 처리 기능을 제공한다.
• 취소 요청 기능을 제공하여 불필요한 네트워크 요청을 방지한다.

쉽게 말해서 정보를 주고 받을 때 문제가 생기면 알려주고, 요청을 중간에 멈출 수도 있고, 요청하는 정보는 주로 텍스트 형식인데 Axios는 이를 자동으로 이해할 수 있는 간단한 도구이다!

Axios 설치하기

# npm 을 통한 설치
npm install axios

# yarn 을 통한 설치
yarn add axios

 

Axios 사용하는 방법

기본 문법

axios(config)

우리는 axios 를 이용해 HTTP 요청을 보낼 때, 보내고자 하는 요청에 대한 설정을 config 객체에 담아야한다. config 에는 다양한 옵션을 포함한다.

 

요청 파라미터

config	description
method  **	요청을 보낼 URL 주소를 지정. 엔드포인트를 가리킨다.
url **	HTTP 요청 메서드로 GET 이 기본적으로 사용된다.
params	URL의 쿼리 매개변수를 설정
headers	요청 헤더. 요청 헤더에 사용자 정의 헤더를 추가 가능
data	요청 body 에 보낼 데이터를 설정한다.
baseURL	공통적으로 사용하는 기본 URL 주소를 설정
responseType	서버에서 받을 응답의 데이터 형식을 설정해준다.
withCredentials	Axios 요청에서 쿠키 및 HTTP 인증 정보를 포함하도록 설정하는 옵션
auth	요청에 대한 HTTP 기본 인증을 설정한다. 사용자 이름과 암호를 제공하여 인증을 수행

― request body : 클라이언트가 서버로 전송하고자 하는 데이터가 포함된다. json 형식으로 데이터를 전송하거나 form 데이터나 multi part 데이터를 포함할 수 있다.

 

사용 예시

// GET 요청
axios({
  method: 'get',
  url: url,
  params: {
    id: 1,
    category: 'review'
  },
  headers: {
    Authorization: 'Bearer YourAccessToken'
  }
})
.then((res) => {
  console.log(res.data);
})
.catch((err) => {
  console.error(err);
});

// POST 요청
axios({
  method: 'post',
  url: url,
  data: {
    name: 'Dev',
    title: 'good review'
  }
});

 

method 생략하고 url 만 전달하면?

method 를 생략하면 기본적으로 GET 요청을 전송한다.

axios(url[, config])

 

요청 메서드 명령어들

편의에 따라 사용할 수 있는 다양한 요청 메소드가 있다. 이 중에서 가장 많이 사용되는 형태는 GET, POST, PUT, DELETE 요청에 대한 단축 메서드이다.

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.post(url[, data[, config]])
• axios.patch(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.head(url[, config])
• axios.options(url[, config])  

 

단축 옵션으로 요청 보내기

GET 요청

GET 요청은 어떤 경우 사용하는 걸까?

사용자가 작성한 리뷰의 목록을 웹 페이지에 표시하려고 한다면, 이에 대한 데이터가 담겨있는 api 를 활용하여 정보를 가져올 것이다. 이러한 GET 요청은 웹 애플리케이션에서 서버로 데이터를 요청할 때 사용하는  가장 간단한 HTTP 메서드 중 하나이다.

api의 엔드포인트로 `https://raminocoding.com/review` 를 설정하고, axios.get()을 사용하여 서버에 GET 요청한다. 그 후 then()과 catch()를 사용하여 성공 및 실패 시 처리를 정의할 수 있다.
아래와 같이 axios 를 사용하는 방식은 단축 메서드이다.

const url = 'https://raminocoding.com/review';

const [reviewList, setReviewList] = useState<ReviewListProps[]>([])

const showReviews = () => {
  axios.get(url)
    .then((res) => {
      // 성공한 경우 응답 처리
      setReviewList(res.data)
      console.log('응답 완료 : ', reviewList);
    })
    .catch((err) => {
      console.error('에러 : ', err);
    });
}

 
✒️ 만약 카테고리가 변경될 때마다 데이터를 불러오고 싶으면 useEffect 를 사용하면 된다.

useEffect(() => {
  showReviews()
}, [category])

 
✒️  버튼을 클릭했을 때 데이터를 불러오고 싶다면 버튼에 onClick 이벤트를 걸어주면 된다. 그러고 나서 가져온 데이터를 map 을 통해 리스트 렌더링을 해주면 리뷰의 목록을 전부 불러올 수 있다.

<button onClick={handleGetReviewsList}>리뷰 리스트를 불러옵니다.</button>

const handleGetReviewsList = () => {
  axios.get(url)
    .then(res => {
      setReviewList(res.data);
      console.error('데이터 가져오기 성공 : ', res.data);
    })
    .catch(err => {
      console.error('에러 : ', err);
    });
}

<ul>
  {reviewList.map(item => (
    <li key={item.id}>{item.content}</li>
  ))}
</ul>

 

[React] 리스트(배열) 렌더링, Key

POST 요청

POST 요청은 웹 애플리케이션에서 서버로 데이터를 보내는 HTTP 메서드 중 하나이다. POST 는 데이터를 서버로 제출하거나 업데이트할 때, 폼 데이터 전송, 파일 업로드에 사용됩니다.
기존의 리소스를 업데이트하는 PUT과 달리 POST 는 주로 새로운 리소스를 저장하는 데 사용한다. 또한 매 요청마다 새로운 정보 객체를 추가한다.

const params: {
  id: number
  filter: stirng
  createAt: string
} = {
  id: 1,
  filter: "buy",
  createAt: "2023.10.21",
}

const submitReview = () => {
  axios
    .post(url, params)
    .then((res) => {
      console.log('리뷰 작성 완료');
    })
    .catch((err) => {
      console.error('리뷰 작성 실패');
    });
};

PUT 요청

POST 요청과 사용 방법이 유사하다.

PUT 요청은 새로운 데이터 생성이 아닌, 기존의 데이터를 수정할 때 사용한다.

// 수정할 리소스 URL
const editUrl = '/review/edit/13'

// 수정할 데이터
const editData: {
  name: string
  title: string
  content: string
} = {
  name: 'dev diary',
  title: 'goooooood products',
  content: 'good coding',
}

// PUT 요청 보내기
axios.put(editUrl, editData)
  .then((res) => {
    console.log('요청에 성공했습니다.')
  })
  .catch((err) => {
    console.log('요청에 실패했습니다.')
  })

 

PATCH 요청

patch 요청 역시 put 과 마찬가지로 데이터를 수정하는 데 사용되는 메서드이다. put 과 비슷한 역할을 하지만 patch 는 리소스의 일부를 수정하는 데 사용된다.

// 수정할 리소스 URL
const updateUrl = '/review/edit/13'

// 수정할 데이터
const updateData: {
  name: string
} = {
  name: 'developer diary'
}

// PATCH 요청 보내기
axios.patch(updateUrl, updateData)
  .then((res) => {
    console.log('요청에 성공했습니다.')
  })
  .catch((err) => {
    console.log('요청에 실패했습니다.')
  })

 

POST,  PUT,  PATCH 차이점

 POST는 새로운 리소스를 만들 때 사용되고, PUT은 리소스를 갱신하거나 생성할 때 사용되며, PATCH는 리소스의 일부를 수정할 때 사용된다.

 

POST	PUT	PATCH
Create	Update	Partial Update
생성	갱신, 생성	일부 갱신
여러 번 호출 시 매번 다른 결과 생성	여러 번 호출 시 동일한 결과	지정한 변경사항 일부만 변경

 

PUT, DELETE 사용 보안에 좋지 않다?

PUT, DELETE 사용이 보안적인 측면에서 문제가 되는 것은 아니지만, 사용할 때 제대로 처리하지 않으면 보안 문제가 발생할 수 있다.
PUT 메서드를 사용 시 사용자 권한, 인증을 제대로 관리해야한다. 예를 들면, 사용자 자신의 리소스만 업데이트 하도록 제한해야한다.
DELETE 메서드의 남용을 하지 않기 위해 권한 확인 절차를 거쳐야 한다. 실수로 데이터가 삭제되는 것을 방지하기 위해 '복구 가능한 삭제' 기능을 구현할 수도 있다. 완전히 삭제되기 전에 복구가 가능하기 때문이다.
 

메서드를 사용할 때 보안적 처리하기

• 인증(Authentication)
• 권한 부여(Authorization)
• 접근 제어(Control Access)
• 입력 유효성 검사(Input Validation) 등

---

• Axios Docs