1.構想

reactプロジェクトを使用してtodo list appの作成が行われます.
まずcssを着てあげません.
機能の実現に重点を置いて行う.
したがって、他のライブラリではなくlocalstorageを使用して、to do list itemのみを保存します.

1-1. 構成部品

1.保留中の事項を入力
2.待機事項リスト
まず、この2つの要素のみが生成されます.(修正、削除、チェック機能は以下の通り)
ファイル構造

src
⌞components - Input.js
	    - List.js
-App.js
-index.js

2.接続部品

App.jsを入力します.jsとList.jsコンポーネントを接続します.

import React from 'react';
import Input from 'components/Input';
import List from 'components/List';

function App() {
  return (
    <>
      <Input />
      <List />
    </>
  );
}

export default App;

3.保留中の入力ウィンドウの作成

「保留中の入力」ウィンドウはInputです.jsコンポーネントでの作成
非常に簡単な画面部分はinput,buttonラベルで作られています.

<div>
      <input />
      <button>확인</button>
</div>

3-1. input

入力した値をある場所に保存する必要があります.
inputのonChangeでvalueを取得します.

const onChange = (event) => {
    const { value } = event.target;
    console.log(value);
};

これでonChange関数を記述し、inputラベルに接続することで、コンソールログに入力した値がinputウィンドウによく印刷されることを確認できます.(todoItemをinputtagvalueに接続するのを忘れないでください!さっき忘れました)この値をtodoItemという変数に保存します!

 const [todoItem, setTodoItem] = useState('');

これにより、useStateを使用してtodoItemという変数を作成し、撮影コンソールのonChange関数にtodoItem(value)を設定し、todoItemがinputで作成した値をonChange関数で格納します!

3-2. button

todoItemに存在するデータの確認をクリックするとlocalStorageに保存されます.
(これまではuserState変数に格納していましたが、リフレッシュするとデータが消えます.)
ボタンのonClick関数でストアド処理を行います.保存が完了したら、todoItemを初期化するのを忘れないでください.

const onClick = () => {
  const tempArray = window.localStorage.getItem('todoList')
      ? JSON.parse(window.localStorage.getItem('todoList'))
      : [];

    window.localStorage.setItem(
      'todoList',
      JSON.stringify([...tempArray, todoItem]),
    );
    setTodoItem('')
};

最終的にはtodoItemをリストとして配布する必要があるため、localStorageに配列が格納されます.
localStorageはDOM stringのみを処理するため、配列データをstringに解析して渡す必要があります.
todoList配列に既存の値がある場合は、その値を保持して新しい値を追加する必要があります.名前の拡張オペレータ構文を使用して配列をマージする(array concatで置換可能)
この作業が完了したら、開発者ツールのApplication tab storageを確認します.

Inputウィンドウに値を入力したら、「OK」ボタンをクリックすると、localstorageでよく保存されていることがわかります.

3-2-1. object array

今のように簡単にstring配列を作成すればいいのですが、
後で修正、削除などの操作を行う場合は、誰もが自分の身分を持っている必要があります.
localStorage配列には、[{id:1、item:[起床]}、{id:2、item:[ロック]]]として格納する必要があります.
だからonClick(保存時)でもId値は一緒に保存したい.IdはDataです.now()を使用して一意の値として作成および格納します.
Date.Now()メソッドは、UTCから1970年1月1日0時0分0秒までのミリ秒を返します.

const onClick = () => {
  const tempArray = window.localStorage.getItem('todoList')
    ? JSON.parse(window.localStorage.getItem('todoList'))
    : [];
  window.localStorage.setItem(
    'todoList',
    JSON.stringify([...tempArray, { id: Date.now(), item: todoItem }]),
  );
  setTodoItem('');
};

3-2-2. list update

setTooItemを初期化すると、windowは「OK」ボタンをクリックするたびにリストを自動的にリフレッシュすると表示されます.location.(も一緒に再ロードされます).

window.location.reload();

4.保留リストの作成ウィンドウ

やるべきことリストウィンドウは簡単です.
window.localstorageのtodoList値を取得して配布するだけです.

 const [todoList, setTodoList] = useState([]);

localstorageは、受信したobject arrayをtodoListというusState変数に格納します.(初期値は[])

  useEffect(() => {
    if (window.localStorage.getItem('todoList')) {
      setTodoList(JSON.parse(window.localStorage.getItem('todoList')));
    }
  }, []);

画面がuseEffectでマウントされると、localStorageにtodoListという値があるかどうかを確認し、setTodoListに保存します.
画面にもあります.

<div>
      {todoList?.map((item, index) => (
        <p key={`todo${index}`}>{item?.item}</p>
      ))}
</div>

localStorageからロードしてtodoListというusState変数に格納されている配列を拡散!
終わりだ!
~完成した画面~