[React] Alias 설정으로 코드 가독성 높이기

❓ Alias

Alias 는 "별명" 으로 번역된다.

번역 그대로, Alias 는 긴 파일 경로를 → 짧고 기억하기 쉬운 별명으로 대체하여 접근할 수 있게 해주는 기능이다.

 

예시를 보자!

기존에는 컴포넌트나 모듈을 불러올 때 이런 식으로 상대 경로를 사용했다.

이 방식은 파일 경로가 길어지거나 깊어질수록 가독성이 떨어질 뿐만 아니라, 파일 위치가 변경되면 경로를 일일이 수정해야 하는 불편함이 있다.

import Header from '../../common/components/header/Header.jsx'

 

하지만, alias 를 사용하면?

특정 디렉토리 경로에 대해 짧고 직관적은 별칭을 설정하여, 간단한 경로로 불러올 수 있다.

import Header from '@common/components/header/Header.jsx'

 

❗ Alias 설정의 필요성

1. 경로 관리의 용이성: 복잡한 디렉토리 구조에서도 짧고 간편한 경로를 사용하여 효율적으로 파일을 import 할 수 있다.
2. 코드의 가독성 향상: 긴 경로를 짧은 alias로 대체함으로써 코드가 더 깔끔하고 이해하기 쉬워진다.
3. 유지보수의 용이성: 디렉토리 구조가 변경되더라도 alias 만 수정하면 되므로, 경로 변경으로 인한 코드 수정 작업이 줄어든다.

 

---

❓ Alias 설정 방법

나는 Vite 를 사용해서 Alias 를 설정했다.

Vite 를 사용하면 vite.config.js 파일에서 간단하게 alias 를 설정할 수 있다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@api': path.resolve(__dirname, './src/api'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@common': path.resolve(__dirname, './src/common'),
      '@layouts': path.resolve(__dirname, './src/layouts'),
      '@pages': path.resolve(__dirname, './src/pages'),
      '@stories': path.resolve(__dirname, './src/stories')
    }
  },
});

 

---

📝 정리

1. Alias 사용 전: 긴 상대 경로(../../common/components/header/Header.jsx)로 인해 코드 가독성이 떨어지고, 경로 수정이 번거로움.
2. Alias 사용 후: 짧고 직관적인 별칭(@common/components/header/Header.jsx)으로 경로가 간편해지고, 코드 가독성이 향상됨.
3. 설정 방법: Vite의 vite.config.js 파일에서 resolve.alias를 통해 경로 별칭을 설정하여, 프로젝트 전반에 걸쳐 간편한 경로 관리를 할 수 있음.