TIL 6週間(IM)


マシンレッスン6週目集合

0329月


フロントエンド開発におけるステータス管理

  • 状態は変化するデータ→UIであり、フロントエンド開発において動的なデータ
  • である.
  • 副作用:関数の入力に加えて、関数の結果に影響する要素
    ex)ネットワーク要求、呼API
  • の異なる要素が同じ状態にある場合、このソースは、
  • の位置にある必要があります.
  • データ整合性:
  • データを変更または変更することで、安定性に影響を与える要因を防止し、常にデータ状態の正確性を維持
  • 状態管理ライブラリ特性
  • は、グローバル状態のリポジトリ
  • を提供する.
  • 支柱掘削問題解決
  • 0330.火


    React Hooks


    機能
  • 、クラスを使わずに関数素子で使用できる状態
  • Hookは、応答状態とライフサイクル機能を関数要素に関連付けることができる関数です.
    State Hook
    import React, {useState} from 'react';
    function Example(){
    	const [count, setCount] = useState(0);
    }
  • usStateはパラメータとして初期状態値
  • を受信する.
  • 配列構造分解構文は、状態値と状態を設定するための関数を他の変数
  • として指定する.
    Effect Hook
    import React, {useState, useEffect} from 'react';
    function Example(){
    	const [count, setCount] = useState(0);
    	useEffect(() => {
    		// 브라우저 API를 이용해 문서의 타이틀을 업데이트
    		document.title = `You clicked ${count} times`;
    	}, [count]) // count가 바뀔 때만 effect 재실행
    	// 정리(clean-up)을 이용하는 Effects
    	useEffect(() => {
    		(...)
    		return function cleanup(){ // 컴포넌트가 마운트 해제되는 때에 실행
    			(...)
    		{
    	})
    }
  • 関数コンポーネント内での副作用(コンポーネントモジュール、コンポーネントDidUpdate、およびコンポーネントWinMount用)
  • の実行を可能にする.
  • Effect Hookは、レンダリング後に素子が実行すべき動作
  • を表す.
  • は2番目のパラメータに配置されています.これらの値がレンダリング時に変更されていない場合は、スキップ効果に設定できます.

    Hookのルールを使う


    最高レベルでのみHookを呼び出す(繰り返し文、条件文、ネスト関数でHookを呼び出す)
  • 応答関数要素内のみでHook(Custom HookからHookを呼び出す)
  • を呼び出す.


    HA...

    首金


    反応...勉強する
    受領書による置換
    https://github.com/zzangsemin/study-react

    🔚


    水曜日にテストをしました.習ったばかりのように+テストコードを少し理解する程度で、そんなに難しくはありませんが、もっと勉強する必要があるようです.ㅜは木琴独奏曲なので、前から活用していたと思いますが、できなかったようで本当に残念です