리액트로 직접 데이터를 가져오거나 저장하고 연결을 맺는 행위는 하면안된다.
클라이언트 내부(프론트가 작업하는곳)에 데이터베이스를 직접 연결하게 된다면, 또는 브라우저의 js를 통해 직접연결을 한다면 보안상으로 매우 위험하다.
데이터베이스의 인증정보를 노출시키는 행위이기 때문.

그래서 백엔드 서버, 백엔드 api 라고 불리는 url 요청전송을 통해 서버와 통신하게 된다.

GET 요청보내기

API (Application Programming Interface)

코드를 통해 명확하게 정의된 인터페이스를 다루며,
결과를 얻기위해 규칙이 정의되어있다.
http 요청에 대한 api를 말할때 REST와 GraphQL API를 말한다.

API를 요청할 때

특정한 형식에 맞추어 데이터를 전달해 준다.
그리고 다른 url에서 각각 다른 요청을 보내게 되면 그에 맞는 데이터들을 제공한다.

접근 위치가 다르면 결과도 서로 다르다.

axios

모든 js라이브러리가 사용할 수 있는 http 요청 패키지.
라이브러리 없이도 사용가능.

Fetch API

js 내에서 http 요청을 전송할 수 있는 내장 매커니즘. (브라우저 내장형)
거기다 데이터 전송도 할 수 있다.
fetch() 로 사용한다.

fetch('http://swapi.dev/api/films/', {option})

두번째 인자로는 다양한 선택사항을 지정할 수 있는 js객체, http요청 메소드의 변경을 넣을 수 있다.
그러나 보통 두번째 인자는 사용하지 않고 get() 을 사용한다.

promise

fetch 함수는 호출될때마다 http 요청을 보내는데 이때 함수 호출에 대한 응답(반환값)을 처리해야 한다.

fetch 함수는 promise라는 객체를 반환한다.
http를 요청할때는 비동기로 작업된다. 왜냐하면 요청전송 자체만으로 시간이 걸리기 때문에..
그래서 fetch 결과는 미래에서 확인할 수 있고, promise는 미래의 시점 을 정해준다.

then

그것이 then() 이다.
요청전송이 ok되면 호출되는 메소드이다.
이때 response라는 이름을 붙인 콜백함수를 이용하는데, 이때 response는 객체 이다. (여기에 데이터가 들어있음!)

response에 . 을 찍으면 반환값을 선택할 수 있는 내장메소드들이 vscode에서 쭈루룩 나오는데
response의 본문이 필요할 경우 json()을 사용한다.

fetch('http://swapi.dev/api/films/').then(response => {
 return reponse.json();
  //json은 response의 데이터 본문을 불러온다. json 말고도 다른 반환값들을 가져오는 메소드들도 있다.
})

.json()과 json 데이터

json 데이터는 변환작업이 필요하지만 쉬워서 괜찮다.
json 데이터에도 규칙이 있다. 키 값이 쌍따옴표로 묶여있거나.. 등등
그리고 json도 promise 객체를 반환한다.

과정 정리

fetch('http://swapi.dev/api/films/').then(response => {
 return reponse.json();
}).then(data => {data.results});

1. fetch로 http 요청을 보냄.
2. 요청이 ok 되면 then 을 이용해서 json을 변환함.
3. 2번에서 데이터 변환작업이 끝났을때 작동될 then 함수를 또 추가한다(변환이 완료된 promise의 key를 가져오는 작업)