import 순서대로 정리해보자.

김땡주·2024년 8월 13일

React

목록 보기
3/8
post-thumbnail

💘들어가며

  • import 순서도 코드의 가독성, 일관성 등을 높이는 데 한 몫 단단히 하는거 같습니다.
  • 가독성
    • 파일이 구분되어 코드 읽는 데 도움을 줌
    • 필요한 모듈을 빠르게 찾아 개발 속도 상승
  • 코드 통일성 유지
  • 모듈 추가시 충돌 최소화 등


import 순서

1. 기본 라이브러리

  • React에서 기본이 되는 라이브러리들
import React from 'react';
import ReactDOM from 'react-dom';

2. 서드파티 라이브러리

  • 외부 라이브러리
import axios from 'axios';
import _ from 'lodash';

3. 절대경로

  • 지정된 모듈이나 컴포넌트
  • jsconfig.json tsconfig.json에서 설정
import App from 'components/App';
import config from 'config';

4. 상대경로

  • 상대 경로에 위치한 모듈이나 컴포넌트들
import Header from './Header';
import { formatDate } from '../utils/formatDate';

5. 스타일

  • css 스타일 관련
import './App.css';


ESLint를 사용해서 import 순서 정의

ESLint "sort-imports" 추가

https://eslint.org/docs/latest/rules/sort-imports

eslint-plugin-import 플러그인 설치하는 방법

https://www.npmjs.com/package/eslint-plugin-import
https://pozafly.github.io/environment/putting-rules-into-import-syntax-with-eslint/

profile
못해도 그냥 합니다

0개의 댓글