[React] 비동기 작업, HTTP

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에서 특정 리소스를 삭제할 때 사용