API란 무엇입니까? 어떻게 갈고리를 사용하여 React로 추출합니까?⚓

API 초보자든 가장 좋아하는 갈고리를 사용하고 싶든 모두 하나의 강좌입니다.React와 다른 것들을 더 토론하기 전에, 제가 API와 그 작업 원리를 소개해 드리겠습니다. 저희가 해야 할 일을 더 잘 이해할 수 있도록 하겠습니다.
이 점에 대해 저는 당신이 이미 React와 Hooks를 알고 있다고 가정합니다.그렇지 않다면 official docs은 그들이 한 일을 맛보게 할 수 있을 것이다.기본적으로 Class 을 쓰지 않고 React 응용 프로그램 상태를 사용하고 싶다면 그 갈고리는 좋은 점프 방식이다.
다음과 같은 내용이 도움이 될 수 있습니다.

알려지지 않은 React 용어와 특성의 신비한 베일 20개 벗기기(예시 첨부)🔮

바이바프 쿠르베・ 2020년 4월 12일・ 8분 읽기

#javascript #react #webdev #programming

API란 무엇입니까?🧐

기술적으로 API는 응용 프로그램 프로그래밍 인터페이스를 대표한다.그런데 이 말들이 무슨 뜻이죠?네, 주세요.

It's like a shared boundary across which your application and the data from a server (or a database probably) interact and exchange information need to do some action or run the app.

가장 흔히 볼 수 있는 일은 응용 프로그램 사이에서 호출하는 것이다. (네, 실제로 이 API를 호출하는 방법/함수)주의해야 할 점은 API가 원격 서버가 아니라 그 일부라는 것이다.서버의 작업은 응답 패키지를 수신하고 발송하는 것입니다.
인터넷에는 API와 상호작용을 할 수 있고 심지어 알 수 있는 여러 가지 예가 있다.우리는 모두 페이스북을 사용하기 때문에 당신이 이야기를 발표하거나 댓글을 쓰거나 모인에 반응할 때마다 서버와 상호작용을 하고 API는 당신(클라이언트)과 페이스북(서버) 사이에서 중개인 역할을 한다.
다음은 Medium에 있는 Perry Eising의 글에서 API가 그림에 어떻게 들어가는지에 대한 차트입니다.

애플리케이션에서의 API 역할
너는 전체 문장을 읽을 수 있는데, 그 중에서 이 점을 깊이 있게 탐구했다.

API란 무엇입니까?Perry Eising의 "API" 라는 단어 들어보셨어요?

페리 에신・ 2017년 12월 7일・ 중등적

모든 API가 이렇게 작동하는 것은 아닙니다.일부 회사/도구는 프로젝트에서 특정 데이터를 사용할 수 있도록 API 호출에 액세스하는 기능을 제공합니다.이것들은 위조 사용자 생성기(예를 들어 JSONPlaceholder)에서 SuperHero API까지 가능하다.마지막으로, 그들의 주요 목표는 당신에게 데이터를 제공하는 것입니다.

누가 준비됐어요?

API 이해🔄

단, 본 강좌에서 우리는 Foreign exchange rates API에서 개발한 Madis Väin이라는 화폐 API를 사용할 것이다.European Central Bank에서 데이터를 얻을 수 있는 무료 서비스입니다.
다음은 환율 API를 사용하는 방법입니다.

최신 환율을 얻다

응답을 얻기 위해 get 요청을 보내기만 하면 됩니다.

GET https://api.exchangeratesapi.io/latest HTTP/1.1

그러나 이것은 우리에게 유로 (기본 기초 화폐) 단위의 이율을 제공할 것이다.

당신의 화폐로 환율을 얻다

이를 위해, 우리는 ?base 파라미터를 추가하기만 하면 된다.따라서 달러 가치를 얻으려면 다음과 같이 하십시오.

GET https://api.exchangeratesapi.io/latest?base=USD HTTP/1.1

자, 이제 어떻게 작동하는지 알고 React 프로젝트를 시작합시다!

React 응용 프로그램에서 연결 API 사용🐱‍💻

1단계: 기본 코드와 응용 프로그램 내부를 비웁니다.js는 API의 기본 URL을 상수로 추가합니다.

const BASE_URL = 'https://api.exchangeratesapi.io/latest';

아주 기본적인 단계, 그래, 다음 단계는 아주 좋은 것들을 자랑하는 것이다.🔥

2단계: 애플리케이션을 로드할 때마다 API를 가져옵니다.

우리는 useEffect 갈고리를 사용하여 이 점을 실현한다.앞에서 말한 바와 같이 Effect은 매번 렌더링을 완성한 후에 운행하기 때문에 이곳에서는 좋은 선택인 것 같다.
일.️⃣ JavaScript의 로컬 fetch 을 사용하여 통화 환율 API 호출을 얻고 응답을 JSON으로 변환한 다음 다음 다음 약속에서 data으로 돌아갑니다.

// This will only run the first time our app loads
useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((data) => {
        // Code for the next step here
     }
  }, []);

이.️⃣ useState 갈고리를 사용하여 통화 옵션 목록의 응용 프로그램 상태를 설정합니다.기본적으로 우리는 initialState이 없기 때문에 useState()에 빈 괄호를 두었다.

const [currencyOptions, setcurrencyOptions] = useState([]);

다음은 setcurrencyOptions에서 .then() 함수를 작성합니다.

setcurrencyOptions([data.base, ...Object.keys(data.rates)]);

우리는 하나의 수조를 전달한다.첫 번째 값은 API에서 data, 두 번째 값은 JSON keys 에서 Object으로 돌아옵니다.이렇게 하면 우리의 화폐 옵션은 이 값으로 설정될 것이다.
이 단계에서 console.log(currencyOptions)을 사용할 수 있습니다.첫 번째는 빈 그룹만 출력하지만, 두 번째 실행에서는 기본 EUR에서 MYR까지의 모든 통화 옵션을 제공합니다.우리는 현재 응용 프로그램에서 모든 기초 화폐를 가져왔습니다. 더 많은 연결을 추가하기 시작합니다.
삼.️⃣ 다음으로, 우리는 기본 화폐 값을 표시해야 한다.이를 위해 우리는 useState()의 연결을 다시 이용한다.하나는 기초 화폐 유형이고, 다른 하나는 우리가 전환해야 할 화폐 유형이다.

const [fromCurrency, setFromCurrency] = useState();
const [toCurrency, setToCurrency] = useState();
...
const firstCurrency = Object.keys(data.rates)[0];
setcurrencyOptions([data.base, ...Object.keys(data.rates)]);
setFromCurrency(data.base);
setToCurrency(firstCurrency);

setFromCurrency()은 이 기초 화폐만 획득하고, setToCurrency()은 Object.keys() 수조의 첫 번째 옵션을 획득합니다.UI 코드에서 계속하여 특정 통화 유형을 선택/변경할 수 있습니다.이제 서로 다른 수량을 설정합시다.
사.️⃣ 이 연결은 다음과 같이 금액을 설정합니다.

const [amount, setAmount] = useState(1);

기본값 amount을 1으로 설정합니다.우리는 더욱 진일보하여 사용자가 이 두 가지 방식을 동시에 전환할 수 있도록 허락한다.따라서 "From"필드에 값을 추가하고 "To"필드에서 변환 결과를 얻을 수 있다면, 반대로도 마찬가지입니다.한 분야의 변화는 다른 분야를 직접 반영할 것이다.이 점을 실현하기 위해서, 우리는 값 필드의 교환을 나타내는 단독 변수가 필요하다.

const [exchangeRate, setExchangeRate] = useState();
const [amountInFromCurrency, setAmountInFromCurrency] = useState(true);
...
setExchangeRate(data.rates[firstCurrency]);

금액이 "종"화폐입니까 아니면 "종"화폐입니까?실제 환율치에 대해 우리는 true이 하나 더 있는데 기본적으로 값이 없다.useState()에서 우리는 속도 값을 .then() 대상에서 되돌아오는 속도로 설정하여 data 값을 전달합니다.그것은 우리가 선택한 화폐의 실제 환율을 제시했다.
오.️⃣ 마지막으로, 우리는 한층 더 깊이 들어갔다(지금은 아무런 연결도 없다)😌), 변환에 필요한 모든 값을 얻기 위해 간단한 논리 구축을 추가합니다.

let toAmount, fromAmount;
  if (amountInFromCurrency) {
    // The 'amount' in state is 'fromAmount'
    fromAmount = amount;
    toAmount = amount * exchangeRate;
  } else {
    // 'amount' is in 'toCurrency'
    toAmount = amount;
    fromAmount = amount / exchangeRate;
  }

됐어, 이렇게.firstCurrency이 amountInFromCurrency이면 상태의 true 값이 "from"필드에 있음을 나타냅니다.다음 링크는 위의 단계에서 얻은 amount 값과 amount 값을 곱하는 것입니다.
만약 exchangeRate이 "from"에 없다면, 우리는 곱셈의 상반된 조작, 즉 (🥁 가짜drumroll🥁) 헤어지다허허.

3단계: 화폐 유형을 변경할 때 변환을 업데이트합니다.

이 오류는 다른 amount 갈고리를 사용하여 삭제할 수 있습니다.

useEffect(() => {
    if (fromCurrency != null && toCurrency != null) {
      fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
        .then((res) => res.json())
        .then((data) => setExchangeRate(data.rates[toCurrency]));
    }
  }, [fromCurrency, toCurrency]);

우리는 useEffect()과 fromCurrency을 통과했다. 왜냐하면 우리는 이 값들 중 어느 것이 변화할 때 업데이트를 해야 하기 때문이다.우리는 양방향 데이터 귀속을 진행하고 있습니다!
위의 코드에서 보신 새로운 내용은 toCurrency을 &symbols에 추가하는 것입니다.API 문서에 따라 "기호 매개변수를 설정하여 특정 환율을 요청합니다."

GET https://api.exchangeratesapi.io/latest?symbols=USD,GBP HTTP/1.1

따라서 우리는 BASE_URL 변환을 base으로 설정하고, fromCurrency은 우리가 원하는 모든 값을 받아들인다.우리는 동적 설정 symbols을 통해 이 점을 실현한다.
만약 모든 것이 순조롭다면, 붕괴나 오류가 없다면, React 구성 요소 코드에서 간단하게 이 점을 실현할 수 있습니다.

다음 단계는 어디로 갑니까?🤔

APIList.fun을 사용하여 다른 API를 시도하고 연결을 사용하여 React 프로젝트에 추가할 수 있습니다.모든 API가 무료는 아니므로 프로젝트 크기에 따라 정확한 API를 선택해야 합니다.

Oh no... Better hit up for help: https://t.co/RKvIJcMltv

Image source: https://t.co/2UdZDZhoLu pic.twitter.com/2GpDO8zAmv

— Microsoft Developer UK (@msdevUK)

📫 나의 매주 개발자 통신에 구독하다📫

PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.만약 누군가가 나의 글을 보고 싶다면, here은 나의 매체 프로필이다.