React

서스펜스, 비동기 로딩

sdafdq 2023. 11. 15. 15:33

서스펜스란 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알리는 방법.

 

리액트에서 비동기 데이터를 읽어 오는 것을 표준화.

 

이거 리액트에서 

<Suspense>
	~~비동기
</Suspense>

이렇게 하라고 제공해 주는데 왜 안돼냐..

 

여튼 로딩방법

const [success, setSuccess] = useState(false);
const [data, setData] = useState([]); 
useEffect(()=>{
	axios.get(~~~~)
    .then((res)=>{
    	return res.date
    })
    .then((data)=>{
    	setData(data);
        setSuccess(true);
    })
},[])

return(
    <div>
        {
            success?(
              <ul>
              	{
                	data.map((el)=>{
                    	return <li key = el.id>{el.name}</li>
                    });
                }
              <ul/>
            ):(
              <></>
            )
        }
    <div>
)

dlfjs tlrdmfh.

'React' 카테고리의 다른 글

useReducer  (0) 2023.11.21
리액트 라우터 링크  (0) 2023.11.15
스프레드  (0) 2023.11.15
스타일드 컴포넌트  (0) 2023.11.10
리액트 이미지 가져오는 법  (0) 2023.11.09