코드를 간단하게 줄여준다.
렌더링 시 발생하는 side effect를 방지할 수 있다.
const [loading, setLoading] = useState(false);
useEffect
useEffect(async() => {
setLoading(true); // 데이터를 받아오기 전에는 loading true
setFlightList(await getFlight(condition));
setLoading(false); // 데이터를 받아오고 나서 loading false
}, [condition]);
render
// true : LoadingIndicator 컴포넌트를 보여주고
// false : FlightList 컴포넌트를 보여준다.
{loading ? <LoadingIndicator /> : <FlightList list={flightList} />}