Loading...
![[GPT] PMP 시험 대비: 난이도 별 문제](/_next/image?url=https%3A%2F%2Fd2gg9iclns4v4e.cloudfront.net%2Fimages%2Fnews%2F1731038059770_pmp%20cv.webp&w=256&q=75)
렌더링과 로딩의 차이점
KUKJIN LEE • 5개월 전 작성
렌더링(Rendering)은 로딩(Loading)과는 조금 다릅니다. 간단히 말해서, 렌더링은 웹 페이지의 콘텐츠를 사용자에게 보여주기 위한 작업입니다. 즉, 데이터를 시각적으로 표시하는 과정입니다. 이와 비교하여 로딩은 데이터를 가져오는 과정 자체를 의미합니다.
렌더링(Rendering)과 로딩(Loading)의 차이점
-
로딩(Loading)
-
정의: 서버에서 데이터를 가져오는 과정입니다.
-
예: API 호출, 데이터베이스 쿼리, 파일 다운로드 등.
-
역할: 필요한 데이터를 애플리케이션에 가져옵니다.
-
단계: 데이터를 가져오는 단계입니다.
-
-
렌더링(Rendering)
-
정의: 가져온 데이터를 화면에 표시하는 과정입니다.
-
예: HTML을 생성하고, CSS로 스타일을 적용하며, JavaScript로 동작을 추가하는 것.
-
역할: 사용자가 볼 수 있도록 데이터를 시각적으로 변환합니다.
-
단계: 데이터를 가져온 후, 이를 사용자가 볼 수 있는 형태로 변환하는 단계입니다.
-
예시를 통한 설명
-
로딩(Loading):
-
서버에서 데이터를 가져오는 과정입니다.
-
예시:
fetch또는axios를 사용하여 API 호출을 통해 데이터를 가져옵니다.
-
// 데이터 로딩 예시
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
렌더링(Rendering):
-
가져온 데이터를 화면에 표시하는 과정입니다.
-
예시: React 컴포넌트를 사용하여 데이터를 화면에 표시합니다.
// 데이터 렌더링 예시
function DataDisplay({ data }) {
return (
<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);
}
export default function Page() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then(fetchedData => setData(fetchedData));
}, []);
if (!data) return <div>Loading...</div>;
return <DataDisplay data={data} />;
}
요약
-
로딩은 데이터를 가져오는 과정입니다. 서버로부터 필요한 정보를 받아오는 단계입니다.
-
렌더링은 가져온 데이터를 사용자에게 보여주는 과정입니다. 화면에 HTML, CSS, JavaScript를 통해 데이터를 시각적으로 표시하는 단계입니다.