[React] 5. fetch 함수

 

fetch() 함수란?

 

fetch 함수는 JavaScript에서 제공하는 API 중 하나로, 서버에서 데이터를 가져오기 위해 사용됩니다.
fetch 함수는 네트워크 요청을 보내고, 서버로부터 응답을 받습니다. 응답은 promise 객체로 반환되며, 이를 통해 비동기적으로 데이터를 처리할 수 있습니다.

ChatGPT에 물어봤을때 나온 답변인데,  다른곳에서 찾아본 내용과 비교했을 때 큰 차이가 없어 가져와 봤다.

 

위의 설명대로, fetch API는 백엔드 서버와 데이터를 주고받는데 사용한다.

간단하게 설명하자면 React에서는 Node.js 등과 데이터를 주고받기 위해 fetch 함수를 사용한다.

 

자세한 내용은 다음 링크들에 정리되어 있다.

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

https://opentutorials.org/module/3447/20474

실습환경 준비 - WEB3 - Ajax

---

fetch() 함수 사용법

 

  const userData = {
    text: "보내기 테스트"
  };

  fetch("http://localhost:3001/test", { // 주소
  
    // 서버로 데이터 보내기
    method: "post", // method :통신방법
    headers: {      // headers: API 응답에 대한 정보를 담음
      "content-type": "application/json",
    },
    // body: 전달할 내용. 통신할때는 객체로 통신하기에 객체 타입으로 작성해야 함
    body: JSON.stringify(userData), //userData라는 객체를 보냄
  })

    //서버에서 보낸 데이터 받기
    .then((res) => res.json())
    .then((json) => {
      console.log(json.sendText);
    });

react로 만든 페이지에 위와같은 코드를 작성한 다음,

app.post("/test", (req, res) => {
    const recivedText = req.body.text;
    console.log(recivedText);
    const sendText = {
        text: "보내기 성공!",
    };
    res.send(sendText);
});

node.js에서 위와 같은 코드를 작성한다면

 

react에서 node.js로 "보내기 테스트"라는 텍스트가 담긴 객체를 전송하고,

node.js에서는 react로 "보내기 성공!" 이라는 텍스트가 담긴 객체가 전송한다.

 

fetch()함수에서 then메소드가 낯설게 느껴졌는데,

then메소드는 response가 왔을 때 실행할 callback 함수를 등록한다.

또한, 첫번째 then메소드의 리턴값을 넘겨 두번째 then메소드의 파라미터로 받는다

 

 

더 자세한 내용은 사용을 해보면서 더 공부해 봐야겠다.