지시사항에 있던 코드 스플리팅에 대해 고찰해보았다.

Next.js에서는 동적 불러오기를 통해 코드 분할을 하는 것으로 알고 있었기에 이를 중점적으로 살펴보았다.

1. 코드 스플리팅

한 페이지에서 많은 양의 데이터를 불러올 때 각 라우트 마다 코드 스플리팅을 해주는 것이 좋다.

2. Next.js에서의 코드 분할

Next.js에서는 파일 시스템의 라우트를 내장하고 있어, pages에 파일을 생성하면 해당 라우트가 바로 생성된다. 이점은 React와 달랐다. 따로 페이지 route 경로를 설정해 주지않고 파일이름이 라우트 경로가 되는 것이 신기했다.

그래서 엥? 그럼 코드 분할할게 없나?라고 생각했는데 컴포넌트 코드를 불러올때 랜더링하는 과정에서 적용할 수 있다.

본 과제 코드로 살펴보자

import React, { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import Image from "next/image";
import styles from "./WeatherPage.module.css";
import { fetchWeather, fetchForecast } from "../api/api";

const Header = dynamic(() => import("./Header"));
const Dropdown = dynamic(() => import("./Dropdown"));
... 생략
return(
<h1 className={styles.title}>Weather Information for {city}</h1>
      </header>
      <div className={styles.headerContainer}>
        <Header {...weatherData} />
      </div>
      <Dropdown forecastData={forecastData} />
    </main>
  );
};

내가 구현한 코드에서 헤더와 드롭다운 컴포넌트를 불러올때 사용하였다.

느낀 점

코드 분할이라는 걸 처음해봐서 잘 적용한 것인지 모르겠다.

하지만 내가 코드 분할을 공부하고 적용해보면서 사용자가 한 페이지에서 랜더링되고나서 해당 컴포넌트의 특정 부분을 눌렀을 때 동적으로 컴포넌트를 불러오는 로직으로 코드 분할을 하는 게 좋다고 생각했다.

필요한 정보만 보고 싶은 사용자들을 위한 로직을 구현한다면 그들을 위해 데이터를 요청해서 화면에 보여주는 방식이 코드 분할하는데 큰 의미가 있을 것 같다고 생각했다.