Refactor[2] - 비동기 렌더링

원래 코드 구조는 다음과 같았다.

const Main = () => {
	const [contents, setContents] = useState('');
    
	fetch().then((res) => {
    	setContents(
        	<div>
            	<h1>{res.data.title}</h1>
                <h2>{res.data.subTitle}</h2>
                <p>{res.data.contents}</p>
            </div>
	});
    
    return (
    	<>
        	{contents}	
        </>
    );
}

아무튼 이런 구조였다. 

 

페이지 첫 진입 시에는 빈 페이지이고,

fetch가 끝난 이후에 contents 를 렌더하는 방식이었다.

 

막상 생각해보니 fetch 소요시간 + fetch 이후  DOM 생성 시간 + 리렌더 비용이 정말 비효율적이라고 느꼈고,

기본 값과 기본 틀을 만들어 주고 fetch 이후에 값만 바꿔주는 것이 훨씬 효율적이라 생각하여 그렇게 작성하였다.

나중에 알게 된 것인데, fetch 하는 동안 DOM 을 그려두고 fetch 받으면 값만 바꾸는 것이 맞는 로직이며 비동기로 잘 구현했다고 리뷰를 들었다. 

interface resDataForm = {
	title: string;
    subTitle: string;
    contents: string;	
};

let defaultData: resDataForm = {
	title: '',
    subTitle: '',
    contents: '',
};

const Main = () => {  
	const [resDataState, setResDataState] = useState(defaultData);

	fetch().then((res) => {
		setResDataState(res.data);
	});
    
    return (
    	<>
        	<h1>{resDataState.title}</h1>
            <h2>{resDataState.subTitle}</h2>
            <p>{resDataState.contents}</p>
        </>
    );
}

Typescript 를 도입한 덕분에 이런 생각도 할 수 있지 않았을까 생각이 든다.