📌 오늘 진행 사항
📌 New 지식
오케이, 좋아.
이거 에러 메시지를 보면 딱 감이 온다.
❗️ ReferenceError: Cannot access 'VideoControllerSubTitle' before initialization
✅ 요약하면
“초기화(선언)되기 전에 VideoControllerSubTitle을 참조했다” 는 뜻이야.
즉,
VideoControllerSubTitle을 가져다 쓰려 했는데,
아직 import된 코드가 메모리에 제대로 올라오기 전 이라 생긴 문제.
🧠 왜 이런 문제가 생길까?
보통 이런 경우는 2가지다:
상황 | 설명 |
1. 순환 참조(Circular Dependency) | A.js → B.js → A.js 처럼 서로 import해서 꼬였을 때 |
2. import 순서 문제 | 모듈/컴포넌트 안에서 import/사용 순서가 꼬였을 때 |
🎯 지금 너 상황은?
다른 컴포넌트에서 styled export 한 걸 import해서 쓰고 있다
그런데 initialization 전에 참조 에러
✅ → 순환참조(Circular Import) 가능성 90% 이상.
📦 예를 들어볼게
VideoController.js
import {VideoControllerSubTitle} from './VideoControllerSubTitle';
VideoControllerSubTitle.js
import VideoController from './VideoController'; // ❗ 여기서 역으로 import하면 순환참조 발생!
✅ 이렇게 서로 참조하면 “초기화 전에 접근했다”는 에러가 터진다.
🔥 해결 방법
1.
순환 참조 끊기
- 서로 import 하지 않게 구조를 바꿔야 해.
- 보통은 공통 컴포넌트를 별도 파일로 빼서 둘 다 가져다 쓰게 해.
예를 들어:
common/VideoControllerComponents.js
import styled from 'styled-components'; export const VideoControllerSubTitle = styled.div` font-size: 18px; color: white; `;
VideoController.js
import {VideoControllerSubTitle} from './common/VideoControllerComponents';
VideoControllerSubTitle.js
import {VideoControllerSubTitle} from './common/VideoControllerComponents';
✅ 공통 파일로 묶으면 순환참조가 안 생긴다!
2.
dynamic import (lazy)로 로딩 순서 제어하기
긴급조치로는
import()를 동적으로 걸어서 런타임에 불러올 수도 있어.
하지만 이건 코드 복잡해지고 권장되진 않아.
(진짜 급할 때만 사용)
🧹 결론
“공통 스타일 컴포넌트를 별도 파일로 분리해서, 양쪽 컴포넌트가 그 파일만 참조하도록 만들어라.”
✅ 이게 가장 깨끗하고 안전한 해결 방법이야.
✨ 정리 요약
- 에러 원인: 순환 참조 (import 순환)
- 해결책: 공통 스타일 파일 분리
- 긴급 해결: dynamic import 가능하지만 추천X
💬 추가로 궁금할 수 있는 것
- “순환참조를 자동으로 탐지해주는 툴”도 알려줄까?
- “styled-components에서 순환참조 막는 베스트 패턴” 알려줄까?
👉 더 깊이 파고들고 싶어? 🚀
(원하면 실전 리팩토링 예제까지 같이 해줄게!)