React import 지옥

아무생각없이 임포트를 하다보면

'../../../styles/theme/Theme'

과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.

tsconfig를 사용하는 방법

"compilerOptions": {
    "baseUrl": ".",
  },
  "include": [
    "src"
  ]
}

위와같이 설정을 하고,

src
┗─index.tsx
│ app.tsx
│   components/
│ ┗─home/
│    	index.tsx
styles
 ┗─theme/Theme.ts
    cssStyles/reset.css

프로젝트가 위와같이 구성이 되어있다고 한다면,

import { Container } from 'src/components/home/index'
import { Theme } from 'styles/theme/Theme'

과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀찮음이 있지만, 프로젝트 구조를 명시적으로 입력하여 가독성이 좋아지는 장점이 있는것 같다.

React-craco를 사용하는 방법

이 분의 블로그를 참고해서 사용했었다.
React Typescript | 절대경로 적용하기(feat.React-CRA)

구체적인 설명은 위의 블로그에 있으니 생략한다.
craco를 사용함으로써 얻는 장점은 프로젝트 구조를 잘 알고 있다는 전제하에 import 루트를 여러군데로 설정할 수 있어서 from뒤의 폴더 경로를 짧게 입력할수 있다는 장점이 있다. 둘 다 써봤는데, 나는 결국 tsconfig 파일만 수정하는 방법으로 돌아가긴 했지만 craco도 충분히 익숙해지만 효과적인 방법인것 같다.