useState 무한루프

Question

최초로 getList() 의 리턴값을 상태데이터(keywordList)에 저장하고useState Hook의 상태 데이터 유무에 따라 표시하는 html을 구현했습니다.{keywordList.length > 0 ? : (...

로 만 사용하면다시 정상적으로 실행되는데, 아까처럼 적용하면 왜 그런지 원인을 잘 모르겠습니다.import { useState } from "react"; import Nodata from "./noData"; import checkUserId from "./checkUserId"; export default function Keyword(){ checkUserId(); const [keywordList, setKeywordList] = useState([]); const getList = async (e) =>{ await fetch("http://localhost:8080/top10") .then((response) => response.json()) .then((data) => {setKeywordList(data)}) .catch((error)=>{ console.log(error); }); } getList(); return(

조회된 데이터가 없습니다.

) }

doooss · Accepted Answer

리액트에서 data fetching 을 훅없이 사용하면 무한루프에 빠집니다. 이유는 스테이트 변경 -> 리렌더 -> 데이터 페칭 -> (state 값 변경으로 인한) 리렌더 -> 리렌더 되니 다시 데이터 페칭 반복 useEffect 같은것으로 횟수를 제한시켜주세요

useState 무한루프

1개의 답변

Q&A 목록