TIL 20210923[第998便]

ドムは?
DOMは、html単位ごとにオブジェクトとして扱われるモデルです.たとえば、divという名前のオブジェクトには、ツリー構造と呼ばれるテキストノード、サブノードなど、サブノードの値があります.
つまりDOMはツリー構造!

マルチシード要素メソッド
https://developer.mozilla.org/ko/docs/Web/API/Document

Scopeとは?
変数を宣言するときに使用できる変数の有効範囲をscopurと呼びます.
変数の範囲にアクセスできます!

var:関数単位

let:block単位(変数:letとして宣言された変数は値を変更できます)

const:block単位(定数:宣言された値は一度に変更できません)

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	// {} 증괄호 안에 든 내용을 블럭이라고 표현해요.
	
	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	console.log(a, b, c);
}

条件3項演算子
if文の略語
使用方法:
条件.もし本当なら:偽物なら

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

4つの一般的な組み込み関数->map、filter、concat、from
内蔵関数を作成しなくても、JavaScriptの作成を容易にするために事前に作成されたコードビームです.

mapは配列に属する項目を変換する際によく用いられる.
配列に属する項目を必要な値に変換し、変換後の値を新しい配列に変換します.
つまり、元の配列の値は変わらない!

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);

フィルタは、いくつかの条件を満たす項目のみを選択し、再配置する関数です.
元の案は変わらず、もう一つ欲しい案(ベスト)を作ることができます!

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

concatは、配列と配列を結合したり、配列に特定の値を追加したりする関数です.
元の配列は変更されません.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

P.S concatは重複項目を削除しません!
他の組み込み関数と一緒に使用して削除する必要があります.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

fromシルバーアクセサリー多様な友達🙂
1)アレイまたは類似のアレイとして作成し、新しいアレイとして作成する場合のコピー
2)主に新しいシナリオの作成に使用されます(初期化も示します).

類似配列は何ですか?
[どんな値段で...]このような顔をしていますが、配列された内蔵関数を使うことができない友人たち.DOM nodelistなどは似たような配列です.

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);

JSXルール
1.ラベルを閉じる必要があります
2.無条件でアクセサリーを1個返却
3.JSXからJavaScript値を取得するには、カッコ{}を使用します.
4.classの代わりにclassName!
5.インラインスタイルの使用
ライフサイクル関数
コンポーネントがレンダリングの準備をしている時点から、ページから消えるまでのライフサイクルです.
公式文書(https://ko.reactjs.org/docs/state-and-lifecycle.html)も詳細に議論されている.

要素が作成され、→修正(更新)、→消去される.

を作成することは、最初に構成部品をロードするステップです.

修正(更新)

は、ユーザーの動作(クリック、データの入力など)でデータを変更するか、親コンポーネントをレンダリングするときにデータを更新します.次の場合!
道具を変えるとき
ステータス変更時
親構成部品の更新(=再レンダリング時)
または、強制的に更新された場合!(forceUpdate()で構成部品を強制的に更新できます.)

削除とは、ページを移動したり、ユーザの行動(削除ボタンをクリックするなど)によって、素子が画面から消えたりする段階をいう.

ライフサイクル関数として扱われるライフサイクル
クラス構成部品でのみ使用できます.
(React HooksはReaction 16.8バージョンから登場し、ライフサイクル関数の代わりに使用できます.)

constructor()

render()

componentDidMount()

componentDidUpdate(prevProps, prevState, snapshot)

componentWillUnmount()

StateとProps
stateはコンポーネントが所有するデータです.
propsは、コンポーネントが親コンポーネントから受信したデータです.
Ref
しかし、ある入力ボックスからテキストを取得したい場合は、反応ボックスでどうすればいいのでしょうか.→答えは、反応要素から!

React要素1(クラス要素メソッド):Reactをインポートします.createRef()

React要素2のインポート方法:React.useref()->フィードバックフック

ステータス管理

クラス構成部品のステータス管理-setState()
クラス構成部品のステータスを更新するための関数です.

関数構成部品からステータスを管理-ユーザーステータス()
関数型素子はクラス素子のようにstate自体を持たないがreact hooksを使用してstateを持つことができる!

反応の基本概念を学びましたが、クラス素子と関数型素子の概念を完全に把握していないので難しいようです...