리액트의 비동기적 특성으로 인해 데이터가 렌더링 되지않는 상황 예방법

비동기적 특성으로 먼저 발생하는 렌더링은 api에서 비동기 작업을 처리할 때 주로 발생한다.

function parentComponent(){
	const [reply, setReply] = useState([]);
  
  useEffet(()=> {
		const fetchData = async() => {
        	const res = await fetch('/someapi);
            const data = await res.json();
          setReply(data)
        	}
		})
	fetchData();
,[]}

return(
	<div><ChildComponent reply = {reply} /></div>
)

이런식으로 useEffect에 넣어서 데이터에 의존하는 후속 작업이 데이터를 사용할 수 있게 된 후에만 실행되게 하거나,

childcomponent에 적용할 때는 데이터가 수신되기 전까지 하위 구성 요소에 사용자가 데이터가 로딩되고 있다는 사실을 알 수 있게 로딩 스피너를 넣는것도 좋다.

function ChildComponent({ commentReplies }) {
    if (!commentReplies.length) {
        return <div>Loading...</div>; 
    }

    return (
        <div>
            <h3>Child Component</h3>
            <ul>
                {commentReplies.map(reply => (
                    <li key={reply.id}>{reply.text}</li>
                ))}
            </ul>
        </div>
    );
}