Promise.all(처리할 비동기 작업의 배열)
function App() {
useEffect(() => {
Promise.all([
fetch(url).then(response => response.json()),
fetch(url2).then(response => response.json()
]).then(function([response1, response2]) => {
console.log("response 1: ", response1);
console.log("response 2: ", response2);
});
}, []);
}
-> Promise.all을 이용해 두가지 fetch를 동시에 실행
-> response 또한 배열로 반환되기 때문에 구조분해할당으로 받아줌
fetch 한 데이터를 컴포넌트에 넣어주기
function App() {
const [post, setPost] = useState();
const fetchPost = async () => {
try {
const response = await fetch(url);
const data = await response.json();
setPost(data);
} catch (error) {
console.error('Error => ", error);
}
};
useEffect(() => {
fetchPost();
}, []);
return (
<div>
// fetch가 이루어져 data가 존재하는 경우 그 내용을, 아닌 경우 Loading... 렌더링
{post ? <div>{post.title}</div> : <div>Loading...</div>}
</div>
)
}
HTTP
클라이언트-서버 모델을 기반으로 클라이언트가 요청을 보내면 서버가 응답을 반환하는 방식
특징
1. 무상태성 (stateless)
- HTTP는 상태를 유지하지 않음
- 각 요청은 독립적, 이전 요청의 정보를 기억하지 않음
2. 확장성
- HTTP는 다양한 확장 헤더를 추가하여 기능을 확장할 수 있음
3. 유연성
- HTTP는 다양한 데이터 형식을 전송
- 텍스트, 이미지, 비디오 등 여러 형식을 지원
HTTP 메시지 구조
1. 요청메세지 (클라이언트가 서버로 데이터를 요청할 때)
1) 요청라인: 메서드(GET, POST 등), URL, HTTP 버전
2) 헤더
- 요청의 추가 정보(메타데이터)를 담고있음
- 브라우저 정보, 인증 정보 등 (HTTP는 stateless이므로, 요청을 보낸 클라이언트의 정보를 저장해두지 않음 요청때마다 확인!)
3) 본문
- 선택적
- 주로 POST 메서드에서 사용
2. 응답메시지 (서버가 클라이언트의 요청에 대한 응답을 보낼 때)
1) 상태라인: HTTP 버전, 상태코드 (200, 404 등), 상태 메시지
2) 헤더
- 응답의 추가 정보 (메타데이터)
- 콘텐츠 타입, 데이터 길이 등
3) 본문
- 선택적
- 주로 응답 데이터
HTTP 상태코드
서버가 클라이언트의 요청을 처리한 결과!
세자리 숫자로 구성되며 첫번째 자리의 수에 따라 의미가 달라짐
1xx
- 100: continue
2xx
- 200: OK, 성공적으로 요청이 처리됨
- 201: Created, 요청 성공 + 새로운 자원이 생성됨
3xx
- 301: Moved Permanently, 요청한 리소스가 영구적으로 새로운 URL로 이동함
- 302: Found, 요청한 리소스가 임시로 다른 URL로 이동했음
4xx
- 400: Bad Request, 잘못된 요청 (서버가 원하는대로 요청해주지 않음)
- 401: Unauthorized, 인증 필요
- 404: Not Found, 요청한 리소스를 찾을 수 없음
5xx
- 500: Internal Server Error, 서버가 요청을 처리하는 동안 오류가 발생함
- 502: Bad Gateway, 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받았음
HTTP 메서드 및 RestAPI
GET
서버로부터 데이터를 요청할 때 사용
요청 데이터가 URL에 포함되어 전송되며, 주로 데이터 조회
- REST API에서 특정 리소스를 조회할 때 사용
POST
서버에 데이터를 제출할 때 사용
요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용
- REST API에서 새로운 리소스를 생성할 때 사용
PUT, PATCH
서버의 데이터를 업데이트할 때 사용
요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용
- REST API에서 기존 리소스를 수정할 때 사용
DELETE
서버의 데이터를 삭제할 때 사용
-REST API에서 특정 리소스를 삭제할 때 사용
'React' 카테고리의 다른 글
Tanstack Query 캐시데이터의 생명주기 (0) | 2024.09.05 |
---|---|
TanStack Query (0) | 2024.09.05 |
[React/supabase] 변경된 column만 업데이트하기 (0) | 2024.09.03 |
[React] react-router-dom Outlet 이동하지 않을 때 (0) | 2024.08.27 |
[React] 컴포넌트에 styled-components 로 스타일 적용하기 (0) | 2024.08.23 |