[react]付加効果を扱うUserEffect

useEffectは、単語を分解するのが効果です.しかし、ここで言う効果はどんな効果を使うのでしょうか.🤔 副作用を扱う効果です.

では、Side Effectとは何でしょうか。

日常生活での副作用は「コロナ副作用…」などの文脈に用いられ、否定的な意味に用いられる.ただし、これは漢字で見ると「副次的な役割」にすぎず、プログラミングにおける副次的な役割が関数が何らかの操作を実行する際にinput-output以外の値を操作する場合、その関数は  Side Effect(부수 효과)あります.
反応における副作用を考慮すると,stateやpropsペイントUIの主な機能(function rendering = (state, props) => UI)を受け入れるほか,発生するすべての付随効果が副作用といえる.
そうすれば、그래서 대체 부작용이 뭔데?だと思うかもしれませんが、一般的な関数を使用する場合は、Side Effectのいくつかの例を見てみましょう.

// 예시 1. console.log 부분이 side Effect라고 할 수 있겠다.

const sumOne = (num) => {
	console.log("input", num)
	return num + 1
}

sumOne(1)

// 예시 2. 아래 함수는 side effect가 없는 함수인가?
// 아니! 있는 함수이다.
// input과 output 외의 다른 값을 조작하기 때문에!
// input과 output 외에 외부의 변수 값을 읽어왔기 때문에 side effect를 일으키는 함수가 맞다.

const addNum = 30;
const sumNum = (num) => {
	return num + addNum
}

// 예시 3. 아래 함수는 side effect가 없는 함수인가?
// 아니! 있는 함수이다.
// input과 output 외의 다른 값을 조작하기 때문에!
// input과 output 외에 외부의 변수 값을 변경했기 때문에!! 조작해버렸기 때문에!!

let variable = 10;

const sumVar = (num) => {
	variable = 20;
	return num+1
};

要するに、プログラミング全体では、受信した値を入力として出力に返す以外に!!全部!!(外部変数の読み取りまたは変更、またはコンソールへの書き込み)は副作用です.
同じ論理を反応器の関数素子に適用して理解すればよいが,反応器の関数素子の副作用はレンダリングではなく外部世界に影響を及ぼすいかなる行為であると言える.
𕼧代表的なデータFetching(外部世界から値を取得するため)、直接アクセスDOM(domはブラウザにあり、コンポーネント世界にいるため)、setIntervalのような購読(外部世界の何かを観察しているため)などは副作用と言える.
🛑 注意!onClick onChangeは副作用ではありません.構成部品にあるからです.
useEffectを使用する場合は大きく分けて2種類あります.1つは、使用後にクリーンアップする必要があり、クリーンアップする必要がないことです.

useEffectはまずコンソールで撮りましょう!!

次の項目があるとします.Appコンポーネント本文にconsole.log('minju')を直接印刷し、useEffect(() ⇒ {console.log(’hello’)}を印刷してみました.
😉 では、実行順序は?
1)コンソールにビーズがある
2)画面にUIを表示する
3)コンソールで挨拶
→これが基本概念です.本来は上の行から1行ずつ読んでいるので、私が書いた順番で実行すべきですが、useEffectは基本的にすべてのコンテンツをレンダリングした後に実行されます.

import React, { useEffect } from "react";
import Card from "./Card";
import contacts from "../contacts";

function App() {

  useEffect(() => {
    console.log("hello!");
  });

  console.log("minju");
  
  return (
    <div>
      <h1 className="heading">My Contacts</h1>
		</div>)
}

黒の騎士を演じるUSEEffect

useEffectの最も分かりやすい例は、データの抽出である.ログインしてインスタで!入るときは、初期にデータをロードする必要があるかもしれません.では、ロード関数はどこで作成すればいいのでしょうか.

import React, { useState, useEffect } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	fetch(() => { DATA 불러오기})

	return(
		<>
			<h1> Count : {count} </h1>
			<button onClick={() => setCount(count+1)}> + </button>
		</>
	)
}

🛑 以上のように、本文に直接記入する際の質問です!!

→質問1:レンダリングをブロック
データが本物であれば、レンダリングには時間がかかります.(上から下まで読めないので…)ユーザーが私のサイトに入って、スクリーンには何もありません.うん?これが何なのかと思ってサイトを離れると….
→問題2:レンダリングごとに実行されます.
一度だけデータをロードしたいです.😭 毎回buttonで1つまで数えます.つまり、ステータスが変化するたびに、つまり「スクリーンをレンダリングする」たびに!!データ通信が繰り返されます.

👨‍🏭 この時黒騎士のように登場するUSEEffect!

本体上のFETCH関数をUSEffectで囲みます.useEffect(() => { fetch( DATA 불러다줘) }) 로 변경한다.
これで問題1は解決する.基本的なスクリーンレンダリングが表示され、私のデータがスクリーンに表示されます.そこで、最初の問題はレンダリングをブロックすることです.ただし、データは各レンダリングにロードされ続けます.これを解決するには?[]依存配列を使用します.useEffect(() => { fetch( DATA 불러다줘) }, [] ) 로 변경한다.
依存性配列はuserEffectの動作条件を与える.今のように括弧の中に何も入っていない([])場合は、スクリーンをレンダリングしてからもう一度!実行しよう!そういう意味がある.カッコにstate([state])が含まれている場合は、このステータスが変更された場合にのみuserEffectを実行します.そういう意味がある.
コードを整理するには、

function myComponent() {
	useEffect(() => { dataFetching })
	return <div> hello {state} </div>
}
//위의 경우 렌더링을 막지는 않으나, state 변화될 때마다 매번 fetching을 날린다.
//이럴 때 사용하는게 바로 dependency array!
//array안에 있는 값이 바뀔때만 이펙트를 실행한다.

useEffect(dataFetching(),[]);
// 다음과 같이 변경해주면 첫 렌더링 시에만 dataFetching함수를 실행해준다.

useEffect(dataFetching(), [count]);
// 이제는 count 변화될 때만 함수 실행!

🤓 混同1:依存シナリオの変更時にのみ実行されますが、なぜ最初のレンダリング時に1回実行されますか?

以下の場合、実行順序は?
初回レンダリング時:helloがコンソールで撮影→画面でUIをレンダリング→コンソールでminjuを撮影
count値変更:helloコンソールで印刷→画面でUIをレンダリング→コンソールでminjuを印刷
🧤 初めてレンダリングした時に「count」という子が現れたので、一度撮られました.慌てないで!

import React, { useState, useEffect } from "react";

const Counter = () => {
	const [count, setCount] = useState(0);

	console.log('hello');
	
	useEffect(() => {console.log('minju')},[count])

	return(
		<>
			<h1> Count : {count} </h1>
			<button onClick={() => setCount(count+1)}> + </button>
		</>
	)
}

🤓 紛らわしい場合2:依存性配列...!配列ですので、2つの値を加算できます。では、useEffectはいつ実行されますか?

useEffect(() => { console.log(quiz) }, [ count, input ])

上記のように、いつ実行されますか?

両者同時変換時

のいずれかが

に変更されました.
正解は…!両者のいずれかが変わると、実行されます!

使い終わったらClean-upで片付けましょう!

🤫 購読解除

YouTubeを見たくなければ購読もキャンセルされますプログラミングも同じです.これ以上購読する必要がなければ、ちゃんと解包しなければなりません.イベントレンタル者もそうです.一度つけて、そのアクティブなレンタル器が必要でなければ、それを片付けなければなりません.あるいは必要ない...ごみ不快な残りかすが残ります.この効果を無効にするには、「return 해주면 된다.」を選択します.

useEffect ( () => { 
	setInterval( (console.log("1 second") => {}, 1000 )
}, [])

このページをロードすると、1秒ごとにコンソールで1秒ずつ撮影する関数が実行されます.私がこのページで私がしなければならないことを完成して、別のページに着いたとき、コンソールを開けると、コンソールに1秒が狂って印刷され続けているのが見えます.一度購読したので😅 この場合、消去しないとコンソールが蓄積され続け、プログラムのパフォーマンスが低下し続けます...さあ.従って,この場合cleanupは非常に必要となる.
戻り文に関数を作成してクリアすると、解決します.

useEffect ( () => { 
	setInterval( (console.log("1 second") => {}, 1000 );
	return () => {clearInterval()};
}, [count])

// 조금 더 가독성 있게 작성해보자면, 아래와 같이 함수를 분리해주고 useEffect가 잘 보이게 해줄수 있다.

function printSecondChange() {
	setInterval((console.log("1 sec") => {}, 1000);
	return () => { clearInterval() };
}

useEffect(printSecondChange, [count])

🤓 イベントリスナーを使用して表示

カウンタ構成部品をレンダリングするときは、本体ラベルにスクロールイベントを貼り付けたいです.簡単に考えて、以下のように書きます.

const Counter = () => {
	useEffect( () => {
		document.body.addEventListener('scroll', console.log('scroll'))
	},[])
}

別のページに移動します.しかし、スクロールするたびにコンソールが狂ってスクロールします.解決するなら?

const Counter = () => {
	useEffect( () => {
		document.body.addEventListener('scroll', console.log('scroll'));
		return () => {document.body.removeEventListner('scroll', console.log('scroll')}
	},[])
}

はい、このページをめくったら、スクロールイベントが起こらないように整理します.(今、私のコンソールはもうきれいになりました.😛 うれしい!

✅ Clean upがある場合の実行順序は？「洗濯機を考えてみよう」

上に見たイベントリスナーを貼り付けて外したコードの実行順序は?
スクリーンレンダリング→スクロール貼り付け→状態を変更してスクリーンを再レンダリング→스크롤 떼기→スクロール貼り付け
関数の順序で「状態変更時のレンダリング→スクロール貼り付け→取り外し」とは見なされません.基本的な動作は、return文にコールバック関数が書かれていることがわかります.すなわち、すぐに実行しないで、reactはこの2番目のクリア関数を覚えてから、それが再び実行されると、먼저 clean up 함수를 실행 후の意図した関数を実行します.
洗濯機に洗濯物があるときは、洗濯物を出して、新しい洗濯物を加えます.同じ原理だと思えばいい.

...公式文書のいくつかの問題。

Q1. useEffectがやっていることは?
◇useEffectというhookを使ってReact素子がレンダリング後にすることを伝えます.reactionは、私たちが渡した関数(effect)を覚え、DOM更新後に関数を呼び出します.
Q2. なぜコンポーネントでuseEffectを呼び出すのですか?
構成部品内部に配置すると、effectによって構成部品内部で宣言されたステータス変数にアクセスできます.関数の範囲内に存在するためアクセス可能でありjavascriptのモジュール概念を考慮するだけでよい.
Q3. userEffectはレンダリング後に毎回実行されますか?
そうですね.既定では、最初のレンダリング+の後にあるすべての更新で実行されるものとして扱うことができます.
Q4. 💫 userEffectに渡される関数は、すべてのレンダリングで異なりますか?
そうですね.これは、依存するstate値が正しく更新されるかどうかを心配するのではなく、effect内部で値を読み取ることができるようにしたいからです.レンダリングするたびに、以前とは異なる効果で交互に伝達されます.

の最後の部分

新しい概念に直面する姿勢は好奇心であり、恐怖ではないはずだ.どうしてこれを作ったのですか.どうして必要なの?観点から見ると、新しい概念は私を快適にするために現れたことに気づいた.そしてそのコンセプトや機能を創造してくれた人に感謝します.🤩. 新しいことを勉強する過程で、私は一つ理解したと思っていましたが、また一つ現れたとき、私は慌てていました.その時は覚えておきましょう.ある人は私が直面する慌ただしい問題の状況を解決して、私は人の労に乗って、よくその問題を解決することができて、まず問題が何なのかを見てみましょう!