순환 참조 (Circular Dependency) 문제

개요: 타 파일에서 export 하는 함수를 import 했는데, 서로 import 하는 상황이라 에러 발생

---

순환 참조(Circular Reference)란?

 

- A가 B를 참조하고, B가 A를 참조하는 상태.

 

예시 상황

1. a.component.ts에 functionA를 b.component.ts에서 import 하였다.

2. b.component.ts에 functionB를 a.component.ts에서 import 하였다.

3. 따로 에러에서 순환참조 에러라는걸 알려주진 않는다. 하지만 import 한 function의 위치를 찾을 수 없다는 에러가 뜸.

---

왜 [순환 참조]를 하면 안되나?

 

1. 양방향 구조가 만들어지게 되면, 모듈이 완전히 로드되기 전에 import가 발생하는 상황이 생김 ---> 이 상황으로 인해 import 한 function의 위치 혹은, undefined 모듈 에러가 남.

 

2. 메모리 누수 발생 가능성이 생김. 

 

3. 디버깅과 유지보수가 어려워짐. (애초에 오류나서 진행도 안될때가 많음)

---

해결방안

 

1. util.ts 나, shared.ts와 같은 공통 함수들을 관리하는 파일로 분리시킴

2. a.component.ts와 b.component.ts가 서로 참조하지 않게, 의존성을 재구성 시킴

---

결론

 

구성하기 전 설계하고 만들자