코드를 모듈화하여 작업하다 보면, 서로 의존성을 갖게 되는데 이런 상황이 지속되면 순환 의존성을 가질 수 있다.
A 파일이 B 파일을 참조하는데 B 파일이 다시 A 파일을 참조하는 상황.
이를 순환 의존성(Circular Dependencies)이라고 한다.
자바스크립트 모듈 시스템은 순환 참조를 허용하기 때문에, 기본적으로 런타임 오류가 생기지는 않는다.
하지만 잘못 사용하면 에러가 발생할 수 있다.
참조를 잘 시켰다고 생각했는데, 출력에서 undefined 가 나오는 상황..
명시적으로 에러가 발생하지 않기 때문에, 순환 참조 문제인지 바로 확인하기가 힘들다.
순환 참조 문제라고 인지하지 못하면 하루종일 시달릴 수도 있다.
순환 참조 문제는 모듈의 평가 순서를 정해주면 대부분 해결된다.
모듈의 평가 순서를 정의하는 파일 만드는 것인데, 모듈을 가져올 때는 항상 그 파일로부터 가져오는 것이다.
// index.js
import { A, B } from './modules.js';
// modules.js
export * from './b.js';
export * from './a.js';
// a.js
import { B } from './modules.js';
export const A = 'Test';
B();
// b.js
import { A } from './modules.js';
export const B = () => {
console.log(A);
};modules.js 파일에서 모듈의 평가 순서를 결정한다.
모듈을 가져올 때는 항상 modules.js 파일을 통해서 가져온다.
이렇게 하면 순환 참조에서 모듈의 평가 순서 때문에 발생하는 에러를 방지할 수 있다.
