3. axios hook

ajax를 react hook처럼 쓸 수 있도록 하는 라이브러리인 axios-hooks를 배웠다.

---

그냥 axios로 ajax처리를 하려고 하면 useState를 사용하여 상태값을 정의하고, useEffect를 사용해 출력해야 한다. 그러나 axios-hooks를 쓰면 이러한 처리를 하지 않아도 된다. 먼저 라이브러리를 설치한다.

yarn add axios-hooks

사용하는 방법은 단순하다.

import React, {memo} from 'react';
import useAxios from 'axios-hooks';

const Titanic = memo(() => {

	const [{data, loading, error}, refetch] = useAxios('/titanic');

	if(error) {
		console.error(error);
		return (
			<div>
				<h1>{error.code}</h1>
				<hr />
				<p>{error.message}</p>
			</div>
		)
	}

	return (
		<div>
			<table>
				<thead>
					<tr>
						<th>승객번호</th>
						<th>승객이름</th>
						<th>성별</th>
						<th>나이</th>
						<th>동승자 수</th>
						<th>객실등급</th>
						<th>방 호수</th>
						<th>티켓번호</th>
						<th>요금</th>
						<th>탑승지</th>
						<th>생존여부</th>
					</tr>
				</thead>
				<tbody>
					{data && data.map(({PassengerId, Name, Survived, Pclass, Sex, Age, SibSp, Parch, Ticket, Fare, Cabin, Embarked}, i) => {
						return (
							<tr key={PassengerId}>
								<td>{PassengerId}</td>
								<td>{Name}</td>
								<td><ColorText Sex={Sex} /></td>
								<td>{Age}</td>
								<td>{SibSp+Parch}</td>
								<td>{Pclass}등석</td>
								<td>{Cabin}</td>
								<td>{Ticket}</td>
								<td>{Fare}</td>
								<td>{Embarked}</td>
								<td>{Survived}</td>
							</tr>
						);
					})}
				</tbody>
			</table>
		</div>
	);
});

export default Titanic;

배열의 인덱스 0에서, data는 통신 성공시 받아오는 데이터가 담긴다. loading은 통신 중이면 true, 통신이 끝나면 false가 된다. error는 실패 시 error가 담긴다.

 

이것으로 try~catch문을 사용할 필요도 없다. 홈페이지를 보면 좀 더 복잡하고 다양한 기능을 구사할 수 있는 것 같은데, 좀 더 알아봐야할 것 같다. 다른 예제는 이후에 배우면 더 추가할 예정이다.

 

11.04 추가

const [{ data, loading, error }, refetch] = useAxios(url);

위의 예제처럼 호출한 것이다. 호출한 부분만 따로 빼왔다.

여기서 data는 통신 성공시 받아오는 json 데이터, loading은 통신 중이면 true, 통신이 끝나면 false. error는 에러가 존재할 경우 에러를 담는다. refetch는 만약 axios를 다시 호출하고 싶을 경우에 사용하는 함수이다. url은 데이터를 요청할 url이다.

 

예시처럼 axios를 호출하면 기본적으로 GET 방식이다. 물론 PUT, POST, DELETE 방식도 할 수 있다. 또한 params를 보낼 수도 있다. 먼저 GET 방식과 PUT, POST, DELETE방식이 다른데, 우선 GET부터 보자.

const [{ data, loading, error }, refetch] = useAxios({
     url: '요청URL',
     method: 'GET',
     params: { key: value, key: value }
});

url에는 데이터를 요청할 url을, method에는 방식을, params에는 querystring으로 보낼 값을 넣는다. 다음은 나머지 방식을 보자.

 

const [{ data, loading, error }, refetch] = useAxios({
     url: '요청URL',
     method: 'POST|PUT|DELETE',
     data: { key: value, key: value }
});

GET 방식과 다른 게 없다. method에는 원하는 방식을 넣으면 된다. 다른 점이라고는 params가 data로 바뀐 것 뿐이다.

 

이렇게 사용하면 컴포넌트가 실행됨과 동시에 ajax요청이 전송된다. 하지만 자동 전송되게 하지 않고 수동으로 전송하고 싶을 때도 생긴다. 입력이나 수정, 삭제 등은 버튼을 눌렀을 때 수행하게 하는 등 원하는 타이밍이 있을 테니까. 그럴 때 메뉴얼 기능을 사용한다.

const [{ data, loading, error }, refetch] = useAxios({
  url, method, params, data 등 설정
 }, { manual: true });

두 번째 파라미터에 {manual: true}를 사용하면 된다. 그리고 이렇게 설정한 것을 refetch 함수로 사용하면 된다.

refetch();

이렇게 사용하면 가장 처음에 설정한 그대로 요청이 된다.

하지만 재요청을 하면서 값을 바꾸고 싶을 수도 있지 않을까?

파라미터를 넣으면 된다.

 

// GET 방식
refetch({
	url: '요청 URL',
    method: 'GET',
	params: {key:value, key: value}
});

// POST, PUT, DELETE 방식
refetch({
	url: '요청 URL',
    method:'POST|PUT|DELETE',
	data: {key:value, key: value}
});

이렇게 url, method, params, data를 바꿔서 재요청 할 수도 있다.