React useState

ステータス管理とは?

これらの変化の状態を管理するには、Webページ上のすべての表示可能なデータだけでなく、サーバと送受信双方が表示できないデータも含まれます.
つまり、Instagramで「好き」をクリックすると、コメントを書くと投稿を保存すると、すべての状態が変化します.
これらの状態の変化を管理することを状態管理と呼ぶ.

なぜステータス管理が必要なのですか?

INSTAGRAMで、ある投稿で「いいね」を押したときに1を増やさなかったり、コメント数が増えなかったりしたらどうなりますか?
多くの場合、ステータスが変化します.これは、サイトが大きいほど、複数のインタラクションが困難になり、管理が困難になることを意味します.
これらの理由から、ステータス管理を行う場合、同じデータは1つの場所からのみインポートおよび使用できます.
他の構成部品の同じデータが必要な場合、Reactはユーザ状態を使用して容易に状態管理を行う.

ステータス管理

// import React from 'react';
import { useState } from 'react';

宣言して使用します.

// React만 선언했을 경우
const [count, setCount] = React.useState(0);

// useState로 선언했을 경우
const [count, setCount] = useState(0);

使用してステータス管理を行います.
上記の例では、初期値0を持つ変数countと、変更可能な関数setcountを宣言します.

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return(
    <div>
      <div>
      	{ count }
      </div>
      <button onClick={() => { setCount(count+1) }}>증가</button>
    </div>
  );
}

export default App;

上記の例では、ブラウザでApp構成部品をレンダリングするとcount値が返されるため、count値をステータスと呼ぶことができます.
したがって、ボタンをクリックしてcount値をsetCount関数に追加すると、アプリケーションのレンダリングが影響を受け、動的に変化することがわかります.

昇格ステータス

ステータスドラッグは、複数の構成部品で同じ値(ステータス)を変更する場合に使用します.
親に同じ値(ステータス)を宣言して複数の構成部品を変更することで、これらの値を共有できます.

import { useState } from 'react';

function Example1({ count, setCount }) {
  return(
    <div>
      <div>
      	{ count }
      </div>
      <button onClick={() => { setCount(count+1) }}>증가</button>
    </div>
  );
}

function Example2({ count, setCount }) {
  return(
    <div>
      <div>
      	{ count }
      </div>
      <button onClick={() => { setCount(count+1) }}>증가</button>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return(
    <div>
      <Example1 count={ count } setCount={ setCount } />
      <Example2 count={ count } setCount={ setCount } />
    </div>
  );
}

export default App;

上記の例では、countという値とsetCountという関数が親アプリケーションというコンポーネントに宣言され、Example 1とExample 2というサブコンポーネントで使用するためにpropsで共有されます.
この操作を実行すると、Example 1がcount値を増加すると、Example 2のcount値が変更されます.Example 2でもそうです.

リファレンス

https://sambalim.tistory.com/140
https://mingule.tistory.com/74
https://velog.io/@longroadhome/FE-レスポンス-ステータス管理-第1部