[React] useEffect Hook

4675 ワード
はんのう TIL テキストリンク
こんにちは!
この授業ではReactに内蔵されている基本Hook useState, useEffect, useContextのuseEffectについての学習内容をまとめます.
Hookの詳細については、公式ドキュメントを参照することをお勧めします.https://ko.reactjs.org/docs/hooks-intro.html

userEffect Hookとは?


正式なドキュメントを表示し、コマンド型または何らかの効果を生み出す関数をパラメータとして定義します.
useEffect(didUpdate);
useEffectは、素子が負の効果を処理する際に使用されるフックである.

📌 付随効果とは?


関数が実行されると、関数の外部状態の変更演算が割り当てられ、呼び出されます.

useEffectはいつ使えばいいですか?


特別な理由がなければ、すべての付帯効果はuseEffect hookで処理することが望ましい.

📗 例を使用して、いつ使用するかを説明します。

import React, { UseEffect, useState } from 'react';

function App({ userId }) {
  const [user, setUser] = useState(null);   // API 결과값을 저장할 상태값

  useEffect(async () => {
   const userDate = await loadUserData(uesrId);   // 부수 효과 함수에서 API로 받아온 데이터를 user 상태값에 저장
   setUser(userDate);
  }, [userId]);   // 의존성 배결을 입력하여 userId값이 변경되는 경우에만 API 통신하도록 설정
  
  return (
    <div>
     <p>이름: {user.name}</p>
     <p>나이: {user.age}</p>
    </div>
   );
 }

▼▼さらに


レンダリングのたびに負の効果関数が呼び出されるため、不要な関数が呼び出され、配列を2番目のパラメータとして入力すると、配列の値が変化した場合にのみ関数が呼び出されます.この配列を依存配列と呼ぶ.
依存配列として空の配列を入力すると、要素の作成時にのみ負の効果関数が呼び出され、要素が消えた場合にのみ返される関数が呼び出されます.
参考ドキュメント:実戦反応プログラミング[李在勝知音,現場]
Google Playstoreでのアプリケーションバージョンの更新
を構築し、ファームスタックアプリケーションを展開しましょう