export

const hello = "Hello World!"
export {hello};

export default

const hello = "Hello World!"
export default hello

1つのファイルに1つのオブジェクトしかない場合はexport defaultとしてエクスポートできますが、複数のオブジェクトがある場合はexportを使用して必要なオブジェクトを選択およびエクスポートできます.
(export { name1, name2, name3 };同じように…)
export defaultは、任意にオブジェクト名を設定できることを示します.

ボタンルーティング

<button className='addBtn' 
            onClick={() => {
                history.push(`/add`)
            }}>+</button>

歴史が一番気持ちいいみたいhistory.goBack()を後方に移動

🙋‍♀️ref

以前html,jsのみの処理でgetElementById,appendChildなどの手法を用いて値を取得していた場合,反応器ではrefを用いて管理していた.
仮想DOMにinputがあるが、実際のDOMのinputが更新されていない場合、getElement---などがエラーを引き起こす.
refを使用してDOM要素をインポートする必要があります.
一言で言えばブランド品…?

レンダリング中に入力がDOMに到達しないため、空の出力となる.

では、値を確定するには...?

onChange()を使用して検証できます
入力値が変化すると、onChange()の関数が呼び出されます.
👍👍👍👍👍
onChangeが実行された瞬間はinputがマウントされた後なのでエラーは発生しません!

関数構成部品で?

reactive hook userRef()を使用します.
関数型構成部品は、変数宣言フェーズでnullを初期値として入力します.ライフサイクルメソッドは使用できないため、コンストラクション関数で初期化できません.

divではrefを使用しますが、初期値の状態では変更されず、=>レンダリングステップの前にconsoleを使用します.ロゴを撮るならもちろん...🤣! (実際にレンダリングして再クエリーするとdivが撮影されます.)

    window.setTimeout(() => {
        console.log(my_wrap);
    }, 1000);

これでレンダリングしてから実行するとdivが撮れます.