ステータスとは?
この投稿では、構成部品のステータスを更新するユーザーのステータスについて説明します.
propsの場合、親コンポーネントでのみステータスを設定し、サブコンポーネントでreadonly(読み取り専用ステータス)を使用するのが欠点です.
この問題を解決するのが国だ.
系素子の状態
state:オブジェクト型 関数型素子のユーザ状態
sate: データ型安心
今期の投稿では、関数コンポーネントでusState hookを使用する方法について説明します.
関数のパラメータ:初期値 戻り値(再試行) 現在のステータス の状態を変更するための関数->シンナー関数
1つのコンポーネントでuseStateを複数回使用することもできます.
オブジェクトまたは配列で使用する場合は、不変性を維持します.
userStateは、setter関数で更新する必要があります.
拡張演算子...Obj
配列内蔵関数concat、filter、mapレベルを使用できます.
propsの場合、親コンポーネントでのみステータスを設定し、サブコンポーネントでreadonly(読み取り専用ステータス)を使用するのが欠点です.
この問題を解決するのが国だ.
ステータスのタイプ
state:オブジェクト型
sate:
今期の投稿では、関数コンポーネントでusState hookを使用する方法について説明します.
userStateによる非配列割り当て
const [text, setText] = useState('');
이러한 식으로 비구조 할당을 통한 useState를 선언하여서 사용 할 수 있다.
useStateの使用
1つのコンポーネントでuseStateを複数回使用することもできます.
import React, { useState } from 'react';
const Say = () => {
const [text, setText] = useState('');
// 첫번 째 사용 : 아래에서 바로 새터함수 정의 하여 함수로 생성
const onClickEnter = () => setText('안녕');
const onClickLeave = () => setText('잘가');
const [color, setColor] = useState('black');
// 두번 째 사용 : 새터함수를 return부에 바로 사용
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{ color }}>{text}</h1>
<button style={{ color: 'red' }} onClick={() => setColor('red')}>
// onClick 이벤트에 대한 새터함수를 바로 정의하여 사용
빨간색
</button>
<button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
파란색
</button>
<button style={{ color: 'green' }} onClick={() => setColor('green')}>
초록색
</button>
</div>
);
};
export default Say;
オブジェクトまたは配列の不変性を維持するために使用
オブジェクトまたは配列で使用する場合は、不変性を維持します.
userStateは、setter関数で更新する必要があります.
拡張演算子...Obj
配列内蔵関数concat、filter、mapレベルを使用できます.
Reference
この問題について(ステータスとは?), 我々は、より多くの情報をここで見つけました https://velog.io/@ww8007/React-stateテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol