렌더링과 로딩의 차이점

렌더링(Rendering)은 로딩(Loading)과는 조금 다릅니다. 간단히 말해서, 렌더링은 웹 페이지의 콘텐츠를 사용자에게 보여주기 위한 작업입니다. 즉, 데이터를 시각적으로 표시하는 과정입니다. 이와 비교하여 로딩은 데이터를 가져오는 과정 자체를 의미합니다.

 

렌더링(Rendering)과 로딩(Loading)의 차이점

1. 로딩(Loading)

   • 정의: 서버에서 데이터를 가져오는 과정입니다.

   • 예: API 호출, 데이터베이스 쿼리, 파일 다운로드 등.

   • 역할: 필요한 데이터를 애플리케이션에 가져옵니다.

   • 단계: 데이터를 가져오는 단계입니다.

2. 렌더링(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를 통해 데이터를 시각적으로 표시하는 단계입니다.