순환 참조

리액트 개발을 하던 도중 많은 데이터를 처리할 일이 생겼는데, 프로젝트의 성능이 많이 느려졌었다.

다시 빠르게 동작 시키기 위해서 여러 방법을 찾았는데, 순환 참조가 그중에서 하나였다.

여태까지 이런 문제가 있다는 것 자체를 몰랐기에 글로 적어 기록하려고 한다.

순환 참조란?

순환 참조(Circular Dependency)는 두 개 이상의 모듈이 서로를 직접적 또는 간접적으로 import 하는 상황을 말한다.

function createCircularReference() {
  const objA = {};
  const objB = {};
  objA.reference = objB;
  objB.reference = objA;
}

이렇게 서로가 서로를 참조하면 문제가 발생한다.

 

-문제점

 

• 코드가 예상대로 동작하지 않을 수 있음
• 초기화 순서 문제 발생 가능
• 번들 크기 증가
• 성능 저하
• 컴포넌트 테스트의 어려움

내가 저지른 실수 예시

-Header.tsx

import OperationLevel from './OperationLevel';

const Header = () => {
  return (
    <StyledAppBar>
      <MainTitle />
      <OperationLevel />
      <FieldTime />
    </StyledAppBar>
  );
};

export default Header;

export const dictionary = {
...
};

 

 

-OperationLevel.tsx

import { dictionary } from './Header';

const OperationLevel = memo(() => {
  return (
    <OperationLevelWrapper>
      <CurrentStatus
        status={dictionary[defcon]}
      />
    </OperationLevelWrapper>
  );
});

export default OperationLevel;

 

이런식으로 Header.tsx는 OperationLevel.tsx를 참조하고, OperationLevel.tsx는 Header.tsx 안에 있는 dictonary를 참조해서 순환 참조가 발생했다.

해결 방법

npx madge --circular --extensions ts ./

이 명령어를 치게 되면 사진처럼 순환 참조가 발생한 지점이 나오게 된다.

이 결과를 기반으로 순환 참조를 해결할 수 있다.

 

혹은 ESLint의 rules에 import/no-cycle를 추가로 설정하여 순환 참조가 발생하는 것을 예방할 수 있다.