하나의 리액트 컴포넌트에 import 문 너무 많은 경우에 어떻게 처리해야하나요?

import 같은 경우는 IDE의 도움을 받아서 코드 가독성보다는 의존성이 많아져서 응집성이 낮아지고 결합도가 높아지는 문제를 겪는 경우가 많습니다! 그럴 때는 기능 또는 역할 또는 책임을 기준으로 그룹을 만들어보시고 컴포넌트 파일로 분리하면 해결될 것으로 보여요. 리팩터링/클린 코드/클린 아키텍처와 같은 도서를 참고하시면 좋을 것 같아요 :)

unplugin-auto-import 라이브러리가 도움이 될 수 있습니다. https://github.com/unplugin/unplugin-auto-import

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// without

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}


// with unplugin-auto-import

export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}