import 구문의 선언 순서

import 구문의 선언 순서

 

React 기반의 환경에서 frontend 개발을 할 때 수많은 import 구문을 작성한다. 촉박한 개발 일정으로 인해 import 구문을 자동완성으로만 작성할 경우 무엇이 import 되었는지 알아보기 힘들정도가 되곤 한다. 이를 최대한 미연에 방지하기 위해 import 구문을 사용하는 일반적인 순서에 대해 아래 3가지를 정리해본다.

 

import 순서

1. React 컴포넌트 및 훅

2. 외부 라이브러리

3. 내부 모듈이나 컴포넌트

예시)

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Axios from 'axios';

import MyInternalComponent from './MyInternalComponent';

const MyComponent = () => {
  // 컴포넌트 로직
}

import 선언에 순서를 두는 이유

의존성 해결: 모듈은 선언된 순서대로 해석되므로, 의존성이 있는 모듈은 먼저 선언되어야 한다.

가독성과 유지보수성: 선언 순서는 코드의 가독성과 유지보수성에 영향을 준다. 일반적인 규칙을 따르면 코드를 읽는 사람들이 더 쉽게 코드를 이해할 수 있다.

 

단순히 가독성과 유지보수성을 높이기 위해서 뿐 아니라 의존성을 위해서라도 import 구문 선언 시에 좀더 신경써야겠다.