해커톤을 앞두고 있는 만큼, 민폐가 되지 않기 위해 API 연동 연습이 꼭 필요하다고 느꼈다.
다들 처음 시작을 어떻게 하는거지 ; ; 고민하다 지피티한테 물어봤는데,
진짜 이런 똑쟁이 녀석!
API 연습 사이트가 존재한다는 걸 이제서야 깨달았다..
처음 연습하기로 결정한 사이트는 바로
Reqres - A hosted REST-API ready to respond to your AJAX requests
Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr.open("GET", "https://reqres.in/api/products/3", true); xhr.onload = function(){ conso
reqres.in
HTTP 요청 방식 (GET, POST, DELETE, PUT) 4가지를 가볍게 다뤄볼 수 있는 아주 좋은 사이트이다.
이걸 활용하려면 먼저 개발환경을 세팅해야하는데,
컴퓨터에 REACT가 깔려있긴 했지만
새로운 폴더에 REACT를 세팅해본 적은 없었다.
찾아보니 생각보다 간단한 명령어로 세팅할 수 있다는 것 ,, ~!
npx create-react-app api-practice
cd api-practice
npm start
※ 폴더이름에 공백이 있으면 설치가 되지 않으니 주의하자
이렇게 세팅을 끝내구, 지피티의 안내를 따라
GET 요청으로 데이터를 가져오기
부터 연습해보았다.
Reqres 중 GET( LIST USERS)를 보면,
request의 url과 응답형태, 그리고 불러올 데이터가 어떻게 생겼는지 확인할 수 있다.
이에 맞춰서 컴포넌트를 구현해보자!
import React, { useState, useEffect } from "react";
import axios from "axios";
export default function Userlist() {
const [users, setUsers] = useState([]);
useEffect(() => {
//API 요청
axios
.then((response) => {
setUsers(response.data.data);
})
.catch((error) => {
alert("API 요청 실패: ", error);
});
}, []); //컴포넌트가 처음 렌더링될때 한 번만 실행
return (
<div>
<h1>사용자 목록</h1>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.first_name} {user.last_name} - {user.email}
</li>
))}
</ul>
</div>
);
}
여기서 생긴 궁금증.
- GET 요청 URL를 보고, 저 URL은 누가 만드는 것이고 http://꼴로 늘 시작하는가
- axios는 또 무엇인가
그냥 아는게 하나도 없다는 뜻.(오열)
먼저! 저 URL의 궁금증을 해결하기 위해 API 명세서를 찾아보았다.
나중에 백엔드랑 협업을 하기 위해선 API 명세서를 읽을 줄 알아야 하니까,, 근데 난 한번도 본 적이 없으니깐..
[백엔드] API 명세서 작성법
API 명세서 가이드라인
velog.io
명세서가 읽힌다 !
생각보다 별게 아니었다 !
백엔드쪽에서 URL, METHOD, 응답형태 등을 정리해서 알려주면
그것대로만 코드를 짜두면 되는 것이다.
이정도면 백엔드에게 "해줘" 가 아닌지,,
그 다음 궁금증.
WHAT IS AXIOS?
내가 이전에 지피티 이용해서 예약 사이트를 만들었을 때는
어떻게 정보를 불러왔는지 알아보았다.
AJAX요 ? 그게 뭔데요
비슷한 듯 비슷하지 않은 형태에 뭐가 뭔지 헷갈리기 시작!
[개발상식] Ajax와 Axios 그리고 fetch
여러분들이 프로젝트를 진행하다보면 클라이언트와 서버 간 데이터를 주고받기 위해 HTTP 통신을 사용하게될겁니다. 주로 어떤것을 사용하시나요? 또, 그것에 대해 얼마나 알고계시나요? 저와
velog.io
이건 따로 정리하기로 하고
.
.
GET을 해봤으니 POST도 다뤄보기로 했다.
내가 보낼 항목들과, 보냈을 시 돌아오는 응답형태가 나타나있다.
import React, { useState } from "react";
import axios from "axios";
function AddUser() {
const [name, setName] = useState("");
const [job, setJob] = useState("");
const [response, setResponse] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
const userData = {
name: name,
job: job,
};
axios
.then((response) => {
setResponse(response.data);
setJob("");
setName("");
})
.catch((error) => {
alert("Api 요청 실패:", error);
});
};
return (
<div>
<h1>사용자 추가</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="이름"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="직업"
value={job}
onChange={(e) => setJob(e.target.value)}
/>
<button type="submit">추가</button>
</form>
{response && (
<div>
<h2>응답 데이터도 볼까요?</h2>
<p>이름 : {response.name}</p>
<p>직업 : {response.job}</p>
<p>생성날짜 : {response.createAt}</p>
</div>
)}
</div>
);
}
export default AddUser;
GET과 비슷해보이지만 차이점을 살펴보자면,
원하는 데이터를
const userData = { name: name. job:job}
형태로 받아 보냈다는 것,
그리고 받은 응답을 다시 불러올 때
setResponse라는 useState도 만들어서 처리한다는 점!
응답에 보내는 걸 성공하면,
setResponse(response.data)를 통해
reponse 변수에 response.data의 값을 집어넣고,
이후 response가 존재한다면~ 화면에 보이게하라는 식의 코드이다.
근데 지금은,
한 개의 응답만 보이고, 새로운 응답을 작성하면 새 응답만 확인이 가능하다.
추가하는대로 다 응답이 보이게 하고싶다면?
response를 배열 형태로 바꿔보자.
import React, { useState } from "react";
import axios from "axios";
function AddUser() {
const [name, setName] = useState("");
const [job, setJob] = useState("");
const [responses, setResponses] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
const userData = {
name: name,
job: job,
};
axios
.then((response) => {
setResponses([...responses, response.data]);
setJob("");
setName("");
})
.catch((error) => {
alert("Api 요청 실패:", error);
});
};
return (
<div>
<h1>사용자 추가</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="이름"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="직업"
value={job}
onChange={(e) => setJob(e.target.value)}
/>
<button type="submit">추가</button>
</form>
{responses.length > 0 && (
<div>
<h2>응답 데이터도 볼까요?</h2>
{responses.map((response, index) => (
<div key={index}>
<p> {index + 1} 번 .</p>
<p>이름 : {response.name}</p>
<p>직업 : {response.job}</p>
<p>생성날짜 : {response.createdAt}</p>
<p>__________________________</p>
</div>
))}
</div>
)}
</div>
);
}
export default AddUser;
대신 배열에서 하나씩 꺼내오는 방식이므로, 배열의 이름은 responses 라고 해야한다.
그래야 이후 map을 활용할 때
{responses.map((response, index) ..}
꼴을 이용해
response 하나씩 꺼내와 화면에 보일 수 있기 때문이다.
입력한 데이터 다시 불러오는 거까지 성공!
다음은 Login 화면을 구현해보도록 하자.
To be continue..
