[Javascript] 순환 참조

채용 과제 중 이해할 수 없는 상황이 발생했다.

page에서 ELayout을 정의하고 ProductItem에서 import해서 쓰려고 했는데, ProductItem에서 아래의 오류가 발생했다.

TypeError: Cannot read properties of undefined (reading 'LIST')

응? import를 제대로 했는데, vscode에서도 경로가 인식되는데 왜 undefined라고 뜨는거지?

근데 더 이상한 건, 컴포넌트 내부에 ELayout을 넣는 코드를 넣어주면 오류가 사라진다는 것이였다 🤯

---

// src/app/product/new/page.tsx
import ProductItem from "@/components/ProductItem";

export enum ELayout {
  LIST = "list",
  GRID = "grid",
}
  
const ProductListPage = async () => {
  const {
    data: { products },
  } = await getProducts({ limit: 20, skip: 0 });

  return (
    <div className="flex flex-col">
      ...
    </div>
  );
};

export default ProductListPage;

// src/components/ProductItem.tsx
import { ELayout } from "@/app/products/page";

const CONTAINER_CN = {
  [ELayout.LIST]: "flex-row", // error!
  [ELayout.GRID]: "flex-col",
};

const ProductItem = ({
  product: { title, description, thumbnail, rating, reviews },
  layout,
}: ProductItemProps) => {
  return (
    <div className={clsx("flex h-72 justify-between", CONTAINER_CN[layout])}>
      ...
    </div>
  );
};

export default ProductItem;

지순이한테 물어보니 이런 걸 '순환 참조'라고 한다고 한다. (역시 똑똑이야)

ELayout이 정의된 파일이 이 컴포넌트 파일을 또 import하고 있어서 순환 참조가 발생했고, undefined가 되었다!

이럴 때는, ELayout을 별도의 constants.ts나 enums.ts 파일로 분리해서 서로 참조하지 않도록 구조를 개선해야 한다고 한다.

일단 page.tsx에 정의해놓고, 나중에 옮기려고 했는데 새로운 걸 알아냈다! 🤓