データ・ストリームの理解と非同期リクエストの処理

レスポンスデータストリーム

React開発の最大の特徴は素子単位で開始することである.
構成部品を作成し、作成した構成部品に基づいてページを組み立てる
拡大
素子は素子外からpropsを介してデータを受信する
データ転送の主体は親コンポーネント、すなわちデータストリームは上から下へ

State & Props

ステータス:構成部品内部で宣言および変更可能
Props:構成部品の外部から渡され、サブ構成部品から変更できません
親から伝えますか?
時は流れて?
構成部品の他のstateまたはpropsは計算できますか?

3人のうち1人が選ばれたら、stateではありません!

昇格ステータス

親構成部品のステータスが子構成部品によって変更される場合があります
ステータスを変更する関数をpropsとしてサブエレメントに渡し、サブエレメント上で実行します.

function Parent() {
  const [value, setvalue] = useState('기본값')
  const changevalue = () => {
    setvalue('바뀐값')
  }
  
  return (
    <div>
    <ChildComponent handleButtonClick = {changevalue} />
	</div>
  )
}  
//ChildComponent에서 버튼을 클릭하면 Parent로부터 받은
//setvalue함수가 실행되어 Parent의 value 값이 변하게 됨 

Effect Hook

じゅんかんすう

関数の入力のみが関数結果に影響する関数
入力された値を変更しない

Side Effect

関数のインプリメンテーションが関数の外部に影響を与える場合

let word = 'side'

function effect() {
  word = 'effect'
}

effect()
//effect 함수에 의해 함수 밖의 변수 word가 변함

useEffect(function, array)

functionでの副作用の実行
構成部品の作成後の最初の画面で構成部品をレンダーするには
新しいpropsは構成部品に渡され、レンダリングされます.
ステータスが構成部品に変更され、レンダリングされます.

これにより、新しい構成部品をレンダリングするたびにEffect Hookが実行されます。

const [isloading, setisloading] = useState(false)
  useEffect(()=> {
    setisloading(true)
    getFlight(condition)
    .then(res => {
      setFlightList(res)
      setisloading(false)
    })
  }, [condition]
  )

userEffectの2番目のパラメータ配列(=依存配列)ある値を含むリスト
この値の変更が発生した場合の条件は次のとおりです.
依存アレイが空のアレイの場合、構成部品の最初の作成時に1回実行し、終了します.