useStateの状態管理について

最近javascript特にNext.jsで個人開発していて、その中でuseStateというものを初めて見たので今回はそれをまとめていこうとおもいます

useStateとは？

公式ドキュメントによると状態管理に使われます。めちゃくちゃ簡単にいうとそういうことなんですが、ぼくは思いました
状態管理って何？具体的にどういうこと？って思ったので調べた結果を記そうと思います

実際の使い方はこちらの記事が分かりやすいと思うので、こちらの記事を参考にしていただきたいです

SPA以前のフロントエンドのお仕事

SPA以前のフロントエンドの役割というのは、MVCモデルでいうとデータを持ってきてそれをHTMLに変換することでした。
Railsで例えるなら以下のような感じです

<% @users.each do |user| %>
 <p><%= user.name %></p>
 <p><%= user.email %></p>
<% end %>

上記のように、データとテンプレートを記述してHTMLを出力させるだけでした。
それがいまは変わってきています

最近のフロントエンド

ご存じの通り、SPAが主流になってきていますよね。
そこで問題となったのが1つのページでUIが動的に変化することです
なぜこれが難しいのかというと、遷移する前のDOMに色々手を加えなければいけないからです。
実際に例を見ていきましょう

※以下の例は参考資料の記事からの抜粋になります

// APIからデータを取ってくる
const getTodoList = async () => {
  return ["遊ぶ", "買い物", "宿題"];
};

const container = document.getElementById("todo-list");

// ローディング画面を表示
const loading = document.createElement("div");
loading.textContent = "loading";
container.appendChild(loading);

getTodoList().then(todoList => {

  // ローディング画面を削除
  container.removeChild(loading);

  todoList.forEach(todo => {
    const dom = document.createElement("li");
    dom.textContent = todo;
    container.appendChild(dom);
  });
});

ローディング画面からTodoリストを表示する際に、ローディング画面を削除しなければいけませんし、DOMの変更も求められます
このように、SPA開発においてはDOMを消したり追加したり、というようなことが目まぐるしく行われていてとても複雑性があったわけです

それを解決したのがReact

その複雑性を解決したのが昨今のReactなんです。
React前は変更する前のDOMと変更後のDOMを考えなければならなかったのですが、Reactでは、変更後のことだけを考えればよくなったのです。

しかし、これって状態を切り離しただけで、状態をまた別個で考えなければいけないわけです。
そこで状態管理という単語で色々な道具が出て生きているわけです

【参考文献】