react-fetch -2 (loading) 에러

8 asked

0

안녕하세요.

해당 오류는 말씀하신 것처럼 useEffect 내부에서 조건 없이 동기적으로 setState를 호출할 경우, 컴포넌트가 마운트되자마자 불필요한 리렌더링이 연쇄적으로 발생하기 때문입니다.

따라서 동기적으로 setState를 호출하지 않도록 처리하면 됩니다. 가장 간단한 우회 방법으로는 window.setTimeout(() => {}, 0)과 같은 패턴을 사용해 비동기적으로 상태를 변경하는 방법이 있습니다.

다만 위 코드에서는 fetch 자체가 이미 비동기적으로 동작하기 때문에, 별도로 setTimeout을 사용할 필요는 없습니다. 초기 isLoading 상태를 true로 설정한 뒤, fetch가 완료되었을 때 상태를 변경하는 방식으로 처리할 수 있습니다.

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetch("http://localhost:3000/posts")
    .then((response) => {
      return response.json();
    })
    .then((data) => setPosts(data))
    .finally(() => {
      setIsLoading(false);
    });
}, []);

이렇게 하면 컴포넌트가 처음 렌더링될 때는 isLoading이 true이고, fetch가 완료된 이후 false로 변경되므로 불필요한 동기적 상태 변경을 피할 수 있습니다.

추가로 궁금한 점이 있으시면 언제든지 다시 질문해주세요.

감사합니다.

0

안녕하세요, 인프런 AI 인턴입니다. 5647kr님.

질문하신 내용과 가장 가까운 기존 질문은 useEffect 내부에서 비동기 요청을 실행하고 로딩 상태를 관리하는 사례입니다.

useOptimistic 실전-1 useState

useEffect가 실행될 때 setIsLoading(true)를 호출하기보다는, 로딩 상태의 초기값을 true로 설정하는 방식이 적절합니다. 컴포넌트가 처음 렌더링될 때 이미 데이터를 불러오는 중이기 때문입니다.

const [posts, setPosts] = useState<Post[]>([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  let ignore = false;

  fetch("http://localhost:3000/posts")
    .then((response) => response.json())
    .then((data) => {
      if (!ignore) {
        setPosts(data);
      }
    })
    .catch((error) => {
      console.error(error);
    })
    .finally(() => {
      if (!ignore) {
        setIsLoading(false);
      }
    });

  return () => {
    ignore = true;
  };
}, []);

핵심은 다음과 같습니다.

• isLoading의 초기값을 true로 지정하여 useEffect 내부의 불필요한 setIsLoading(true)를 제거합니다.
  
• 요청이 완료되면 finally에서 setIsLoading(false)로 변경합니다.
  
• 현재 코드의 finally에서 setIsLoading(true)로 되어 있는 부분은 로딩이 끝난 뒤에도 계속 로딩 상태가 유지되므로 false가 되어야 합니다.
  
• ignore 플래그는 컴포넌트가 언마운트된 뒤 요청이 완료되는 경우 상태 업데이트를 방지하기 위한 처리입니다.
  

다만 React 19의 최신 ESLint 규칙은 useEffect 내부에서 동기적으로 상태를 변경하는 패턴 자체를 경고할 수 있습니다. 이런 경우에는 초기 상태를 활용하거나, 실제 프로젝트에서는 React Query, SWR, Router loader 또는 Suspense 기반의 데이터 패칭 방식을 사용하는 것이 더 권장됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.