[ React ] Fetch apply

Fetch関数を使って簡単に会員加入&登録ができました.
論理を記述した後、コードの確認を行います.

제발,, 벨로그 자동 임시저장을 너무 믿지말자,,
1시간동안 작성된 내용들이 다 날라갔,,,ㅜ

애증의 fetch 절대 안잊을 것 같다.

まず。

[Fetchが必要な会員に加入し、登録を実施]

登録とログインの実装に関する全体的なプロセスを作成します.

1. 유저가 이메일을 입력합니다. Email Input의 `onChange` 이벤트 핸들러에 연결된 함수가 실행.
2. 함수에서 Email Input의 `value`를 `setId`를 통해 업데이트 합니다.
3. 유저가 비밀번호를 입력합니다. Password Input의 `onChange` 이벤트 핸들러에 연결된 함수가 실행.
4. 함수 안에서 Password Input의 `value`를 `setPw`를 통해 업데이트 한다.
5. Button을 클릭하면 `onClick`이벤트 핸들러에 연결된 함수가 실행.
6. 함수 안에서 `fetch`함수를 통해 server에 요청(Request)을 보낸다.
7. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 준다.
8. 응답의 결과에 따라 Main 페이지로 이동 하거나 에러 메세지를 띄운다.

[Fetch関数]

fetch関数は2つのパラメータを受け入れます。

の最初のパラメータは  API 주소  

の2番目のパラメータは  HTTP 통신에 관한 내용  

この時の2番目の因子は?

method  理由を表す  GET ,  POST ,  PATCH  などのHTTPメソッドを入力します.

body  で、JSON形式で送受信するデータを入力します.

通信を行う場合は、String形式のJSONを送信する必要があります.  JSON.stringify()  既存のJavaScriptオブジェクトからJSON Stringにフォーマットを変換するには、という方法を使用します.

では、使い方の原因は？

HTTP通信は、他の論理よりも長い時間を要するため、非同期処理が可能である.JSではPromiseオブジェクトは非同期を扱う構文である.したがって、fetch関数はPromiseオブジェクトを返します.then()  メソッドはPromiseオブジェクトに使用できるメソッドです.上記のサンプルコードでは、  then()  fetch関数の実行結果をフィルタリングしています.これは、非同期処理のfetch関数の結果値が到来したときにthenメソッドの動作が実行されることを意味します.

そして方法の解釈!

.then((response) => response.json())

最初に、サーバから送信された応答をオブジェクトに変換します.

.then((result) => console.log("결과: ", result));

その後、応答をコンソールオブジェクトに変換します.logを使用して確認します.
上記の例のコード出力コンソールですが、実際にはブランチ処理ロジックが実装されています.

たとえば、

-ログインに成功したら、ホームページに移動
-ログインに失敗した場合は、alertウィンドウで「ID/パスワード」を確認します.フロート
同じ論理が必要です.
下に書いてあるコードについて説明しましたので、思い出して確認してみます

簡単に言えば、

そして、上記のコードは要求を表し、次のコードは受信応答を表す.
以下にinputの値をサーバに送信し,会員登録を実現するコードを示す.

 // fetch함수를 이용해 api 호출 - 회원가입
  const goToSignup = () => {
    fetch('http://10~~~~/users/signup', {
      method: 'POST',
      body: JSON.stringify({
        name: 'kyuhyun',
        email: id,
        password: pw,
        phone_number: '010',
      }),
    })
      .then(res => res.json())
      .then(result => alert(result.message));
    setId('');
    setPw('');
  };

  // fetch함수를 이용해 api 호출 - 로그인
  const goToLogin = () => {
    fetch('http://10~~~~/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        name: 'kyuhyun',
        email: id,
        password: pw,
        phone_number: '010',
      }),
    })
      .then(res => res.json())
      .then(result => (result.token ? goToMain() : alert(result.message)));
    setId('');
    setPw('');
  };

会員番号の基準に基づいて見る.
上記のセクションでは、要求されたサーバアドレス、POSTメソッド、およびサーバに送信されたコンテンツを作成します.
一番目.そして,サーバに導入されたJSONの値を,ユーザ,JSが理解できる値に変更する.
2番目.そして、入力した値がサーバにスムーズに届くと、alertで成功値がアラートウィンドウとして表示され、alert通知が発生するとIDとPWの入力値が「空文字列」に変更されます.このように解釈できる.

APIを直接呼び出して知った内容

なぜメソッドを使用できないのですか?
会員が入金した時だけPOSTなのではないでしょうか.という考えがありましたが、これは間違いの接近です.最終的には、ログイン時にもinputの値を記入してサーバーに送信し、私が会員登録した時に入力した値と有効性チェックを行い、正しければトークンを発行します.
定数を書いた理由のように?
サーバは、サーバに送信された入力値ではなく、別の値を定数として扱い、必要なオブジェクトのKEYに合わせます.

          onClick={() => {
            fetch('http://10.58.3.10:8000/users/signin', {
              method: 'POST',
              body: JSON.stringify({
                name: 'kyuhyun',
                email: id,
                password: pw,
                phone_number: '010',
              }),
            })
              .then(res => res.json())
              .then(result => (result.token ? goToMain() : alert(result.message)));
            setId('');
            setPw('');
          };}

上のコードはbuttonタグにonClickイベントを付与し、fetch関数でAPIをロードします.すなわち,関数を用いずにタグを直接使用する方法である.

最後に、

< 개똥이는 오늘도 성장한다 ! >