API 연결 후 로딩상태 & 에러 필수라고 합니다.

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [list, setList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    setIsError(false);

    axios
      .get("https://jsonplacehlder.typicode.com/todos")
      .then(function (response) {
        // 정상응답
        setIsLoading(false);  // 초기 상태 둘다 false로 초기화 
        setIsError(false);
        setList(response.data);
      })
      .catch(function (error) {
        setIsLoading(false);  
        setIsError(true);  // Error가 있을 경우 Error 동작 온(true)
      });
  }, []);

  useEffect(() => {
    console.log(list);
  }, [list]);

  return (
    <div>
      <h1>List</h1>
      {isLoading === true && <div>로딩중...</div>}
      {isError === true && <div>오류가 발생하였습니다.</div>} 
      {isLoading === false &&
        list.map((item) => {
          return (
            <div
              style={{
                padding: "10px",
              }}
              key={item.id}
            >
              {item.title}
            </div>
          );
        })}
    </div>
  );
}

export default App;

API 연결 후 로딩 상태와 오류상태에 따라 boolean 값 State로 나타내기

에러와 로딩 초기상태: setIsLoading(false), setIsError(false)
에러만 있을 경우 : setIsLoading(false), setIsError(true)
로딩이 실패할 경우 : setIsLoading(true), setIsError(true)

2) useEffect로 State 상태 확인 ```
useEffect(() => {
console.log(list);
}, [list]);