React 상태 설계와 Effect

1[2  { "id": 1, "name": "아기사자 A" },3  { "id": 2, "name": "아기사자 B" }4]

1import { useEffect, useState } from "react";2
3export default function App() {4  const [attempt, setAttempt] = useState(0);5  const [query, setQuery] = useState("");6  const [state, setState] = useState({ status: "loading" });7  useEffect(() => {8    const controller = new AbortController();9    let active = true;10    setState({ status: "loading" });11    async function load() {12      try {13        const response = await fetch("/members.json", { signal: controller.signal });14        if (!response.ok) throw new Error("HTTP " + response.status);15        const data = await response.json();16        if (!Array.isArray(data) || data.some(item =>17          !item || !Number.isSafeInteger(item.id) || typeof item.name !== "string"18        ) || new Set(data.map(item => item.id)).size !== data.length) {19          throw new Error("명단 형식이 잘못되었습니다.");20        }21        if (active) setState({ status: "success", data });22      } catch (error) {23        if (active && !controller.signal.aborted)24          setState({ status: "error", message: error.message });25      }26    }27    void load();28    return () => { active = false; controller.abort(); };29  }, [attempt]);30  return <main>31    <h1>원격 명단</h1>32    <button onClick={() => setAttempt(value => value + 1)}>다시 불러오기</button>33    <label htmlFor="query">이름 검색</label>34    <input id="query" value={query} onChange={event => setQuery(event.target.value)} />35    {state.status === "loading" && <p role="status">불러오는 중…</p>}36    {state.status === "error" && <p role="alert">{state.message}</p>}37    {state.status === "success" &&38      <MemberList members={state.data.filter(member => member.name.includes(query))} />}39  </main>;40}41
42function MemberList({ members }) {43  if (!members.length) return <p>결과가 없습니다. 검색어나 원본을 확인하세요.</p>;44  return <ul>{members.map(member => <li key={member.id}>{member.name}</li>)}</ul>;45}