react-fetch -2 (loading) 에러

Question

react 19 및 ESLint (exlint-plugin-react-compiler 또는 최신 react-hooks 규칙)에서 새로 추가된 규칙으로 발생하는 문제가 있습니다. useEffect(() => { setIsLoading(true); fetch("http://localhost:3000/posts") .then((reponse) => { return reponse.json(); }) .then((data) => setPosts(data)) .finally(() => { setIsLoading(true); }); }, []); useEffect 내부에서 조건 없이 동기적으로 setState를 호출하면 컴포넌트가 마운트되자마자 불필요한 리렌더링 연쇄가 일어나기 때문에 위와 같은 코드 작성을 금지한다고 하는데, 최신 문법에 맞는 방법은 어떻게 작성하면 좋을지 궁금합니다

수코딩 · Answer

안녕하세요. 해당 오류는 말씀하신 것처럼 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 로 변경되므로 불필요한 동기적 상태 변경을 피할 수 있습니다. 추가로 궁금한 점이 있으시면 언제든지 다시 질문해주세요. 감사합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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 기반의 데이터 패칭 방식을 사용하는 것이 더 권장됩니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.