개발자
하나의 리액트 컴포넌트에 import 문 너무 많은 경우에 어떻게 처리해야하나요?
코드 가독성 측면에서 모듈 최상단에 import 문이 너무 많은 경우에 어떤식으로 처리해야하는지 궁금합니다. 데이터 시각화 툴을 개발중에 있는데, 이 개발툴의 첫페이지이자 마지막 페이지인 Builder.tsx 에서 상단에 import 되고 있는 모듈들이 너무 많아서 가독성 측면에서 별로 안좋다고 생각되어 다른 개발자분들은 이를 어떤식으로 해결하시는지 궁금합니다. 기능베이스 주석별로 나눠서 관리를 하시는지 아니면 바렐(Barrel) 파일을 사용해서, 관리하시는지 궁금합니다.
답변 2
인기 답변
import 같은 경우는 IDE의 도움을 받아서 코드 가독성보다는 의존성이 많아져서 응집성이 낮아지고 결합도가 높아지는 문제를 겪는 경우가 많습니다! 그럴 때는 기능 또는 역할 또는 책임을 기준으로 그룹을 만들어보시고 컴포넌트 파일로 분리하면 해결될 것으로 보여요. 리팩터링/클린 코드/클린 아키텍처와 같은 도서를 참고하시면 좋을 것 같아요 :)
unplugin-auto-import 라이브러리가 도움이 될 수 있습니다. https://github.com/unplugin/unplugin-auto-import
1// without
2
3import { useState } from 'react'
4
5export function Counter() {
6 const [count, setCount] = useState(0)
7 return <div>{ count }</div>
8}
9
10
11// with unplugin-auto-import
12
13export function Counter() {
14 const [count, setCount] = useState(0)
15 return <div>{ count }</div>
16}지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 24일
코드의 가독성을 높이기 위해, 너무 많은 import 문에 대한 처리 방식은 개발자나 팀마다 조금씩 다를 수 있습니다. 하지만 여기에는 몇 가지 일반적인 접근 방법들이 있습니다: 1) **기능/구조 기반으로 정리** : 관련된 모듈들을 묶어서 import하거나 주석으로 구분하여 정리하는 방법입니다. 예를 들어, UI 컴포넌트들, 유틸리티 함수들, 상수 값들 등을 각각 별도로 그룹화하여 import 하는 것입니다. 2) **Barrel File 사용**: Barrel file은 여러 모듈에서 export되는 것들을 한 곳에서 모아 다시 export 해주는 파일입니다. 이를 통해 한 번에 여러 모듈을 import 할 수 있게 하여 코드의 가독성을 높일 수 있습니다. 3) **index file 활용**: 각 폴더에 index.js(file)를 만들고 그곳에서 해당 폴더 내부의 모든 모듈을 export 합니다. 이렇게 하면 해당 폴더의 이름만으로 모든 모듈에 접근할 수 있게 됩니다. 4) **절대 경로 사용**: 프로젝트의 루트 디렉터리를 기준으로한 절대 경로를 이용하면, 디렉터리 구조의 변경에 대해 덜 민감하게 됩니다. 다만, 이러한 접근 방법들도 고려할 때 있어서 가장 중요한 것은 '팀 내의 일관성'입니다. 팀이 크거나 여러 프로젝트가 동시에 진행되는 경우, 모든 개발자가 같은 방식으로 코드를 정리하고 어떤 기준을 가지고 모듈을 import 할 것인지 명확하게 합의를 보는 것이 중요합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!