[javascript 자바스크립트] 순환참조 란?

 

타입 스크립트로(자바스크립트도 마찬가지) 개인 프로젝트를 진행하던 도중 모듈을 import해서 사용하는데 불러와지지 않아서 console.log로 출력을 해보니 undefined가 출력이 되는 문제가 발생했다.

코드상으로도 문제가 없고 모듈로 바꿔오는 과정도 잘했는데 뭐가 문제인가 하고 찾아보다가 순환 참조 때문이라는 것을 알게 되었고, 순환 참조를 정리하고 넘어가려고 한다.

 

간단하게 얘기하면, 

 

A.js를 export 시켜서 B.js에서 import 해서 모듈을 사용하고 있는데,

B.js에서도 A.js를 import해서 사용하려고 하면, 무한 반복을 막기 위해서 의도적으로 빈 객체를 뱉어낸다.

 

아래 코드로 예를 들어보자. A.js 와 B.js가 있다고 가정했을 때, 이 두 모듈을 불러온 main.js에서 A()와 B()를 실행해보면 A는 빈객체가 출력될 것이다.

//A.js
const B = require('./B');
module.exports = () =>{
	console.log('B',B);
};

//B.js
const A = require('./A');
module.exports = () =>{
	console.log('A',A);
};

//main.js

cosnt A = require('./A');
const B = require('./B');

A();
B();

 

 

그럼 순환 참조가 발생했을 때는 어떻게 해야 할까?

 

일단, 어디서 순환 참조가 발생했는지 알아야 하는데 여기서 madge라는 라이브러리를 사용해서 순환 참조된 파일들을 눈으로 쉽게 확인할 수 있게 시각화 한뒤, 수정 해주면 된다.

 

순환 참조된 파일을 찾아서 연결고리를 수정해주니 정상적으로 프로그램이 작동했다.