4. prev,next,state로 상태관리

<aside> 💡
state를 기반으로 그림을 그린다. 그림을 그린 뒤에는 state가 갱신된다.
next와 state를 비교해서 그림을 효율적으로 그릴수 있다.
prev는 원본데이터를 유지한다.
prev, state 데이터는 불변을 유지해야 한다.
state → 현재 상태
next → 미래 상태
prev → 원본 상태
</aside>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
      }

      #user-1 {
        border: 2px solid #4a90e2;
        border-radius: 8px;
        padding: 20px;
        background: transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      #user-1:hover {
        border-color: #357abd;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
      }

      .meta-info {
        display: flex;
        gap: 15px;
        margin-bottom: 12px;
        font-size: 12px;
        color: #666;
      }

      .meta-item {
        background: transparent;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 500;
        border: 1px solid #d0d0d0;
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .body {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="my-input" />
      <button type="button" onclick="del()">id로 삭제</button><br />
      <button type="button" onclick="list()">전체목록</button><br />
    </div>
    <div id="post-box" class="container"></div>

    <script>
      // 상태관리
      let state; // 현재상태
      let prev; // 최초상태
      let next; // 변경된 미래 상태

      // 전체목록보기
      function list() {
        let dom = document.querySelector("#post-box");
        dom.innerHTML = "";

        // 현재상태 갱신
        state = prev;

        // 최초상태
        state.forEach((post) => {
          dom.append(renderUserItem(post));
        });
      }

      // 삭제하기 (1~100 3,5x)
      function del() {
        // 값을 안받으면 공백임
        let id = document.querySelector("#my-input").value;

        // 유효성 검사
        // if (id == "") {
        //   alert("삭제할 id를 입력하세요");
        //   return;
        // }

        next = state.filter((post) => post.id != id);
        let dom = document.querySelector("#post-box");

        // if 로직으로 next 상태와 state 현재 상태를 비교해 볼 수 있음.
        if (next.length != state.length) {
          state = next; // 현재 상태 갱신
          dom.innerHTML = "";
          state.forEach((post) => {
            dom.append(renderUserItem(post));
          });
        } else {
          alert("변경된 데이터가 없어요");
        }

        document.querySelector("#my-input").value = "";
        document.querySelector("#my-input").focus();
      }
      // Item 디자인 리턴해주는 함수
      function renderUserItem(post) {
        let item = document.createElement("div");
        item.innerHTML = `<div class="meta-info">
          <span class="meta-item">userId: ${post.userId}</span>
          <span class="meta-item">id: ${post.id}</span>
        </div>
        <div class="title">
          ${post.title}
        </div>
        <div class="body">
          ${post.body}
        </div>`;
        return item;
      }

      // 데이터 다운로드 함수 (최초에 단 한번만 실행됨)
      async function download() {
        // 1. fetch
        let res = await fetch("<https://jsonplaceholder.typicode.com/posts>");
        // 2. 파싱 (json Array -> list)
        let posts = await res.json();
        prev = posts; // 최초 원본 데이터 보관
        state = prev; // 현재 상태 보관

        // 3. 랜더링
        let dom = document.querySelector("#post-box");

        state.forEach((post) => {
          dom.append(renderUserItem(post));
        });
      }

      // 다운로드 실행
      download();
    </script>
  </body>
</html>