[react] 절대경로/상대경로 & React에서 import시 절대경로 사용하기

Route - 절대경로 vs 상대경로

• 상대경로
  : "./경로값"나 "경로값"처럼 상대 경로값인 경우, 변경될 경로값은 현재 URL의 경로값을 기준으로 하여 변경됨
  -> 경로값이 현재 경로 값 뒤에 붙는다고 생각하면 됨
• 절대경로
  : 경로값이 "/"로 시작하는 절대 경로값인 경우, 현재 URL 경로값을 작성된 경로값으로 변경됨

import { Link } from 'react-router-dom';
// 현재 URL의 경로 "/about"

// 절대 경로, 클릭시 "/apple"로 변경
<Link to="/apple">apple</Link>

// 상대 경로, 클릭시 "/about/apple"로 변경
<Link to="banana">banana</banana>

// 상대 경로, 클릭시 "/about/mango"로 변경
<Link to="./mango">mango</Link>

 

Router 관련 개념이 아주 잘 정리되어 있는 블로그를 발견했다! 작성자님 정말 대단하신 듯... 

내가 정리해도 이것보다 깔끔하게 정리 못할 것 같아 링크를 걸어두고 두고 두고 봐야겠다 싶어 가져왔다 :)

https://velog.io/@kim98111/Routing#navlink-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

React Router Dom v6

https://jforj.tistory.com/283

[React] react-router 사용하기

 

import/export - React에서 절대경로 사용하기

Create-react-app 프로젝트에서 컴포넌트 import 시 경로를 깔끔하게 관리하는 법이 있다.

import Calendar from '../../components/Calendar/Calendar';

위와 같이 컴포넌트를 import할때 상대경로 지정하는게 번거롭기도 하고, 앱 구조가 복잡해지면 코드가 길어지기 때문에 깔끔하게 관리하기 위해 아래와 같이 깔끔하게 컴포넌트를 import 하는 방법을 알아보자.

import { Calendar } from 'components';

 

1. 절대경로 설정

create-react-app 에서는 jsconfig.json (typescript인 경우 tsconfig.json)에 루트폴더를 지정할 수 있다. "baseUrl": "src" 를 작성하면 루트폴더가 src 폴더로 설정되고, 절대경로 작성시 src폴더에서 부터 경로를 찾게 된다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

위와 같이 설정해주면 컴포넌트 import시 앞에 있던 상대경로 '../../'를 생략할 수 있다.

import Calendar from 'components/Calendar/Calendar';

 

2. export ... from ... 모듈 다시 내보내기

컴포넌트를 관리할 때, components, pages 폴더로 나누는 등 다양한 방식으로 폴더를 관리하고 있을 것이다. 그 때 각각의 폴더에서 index.js(typescript라면 intex.tsx) 파일을 만들고 폴더 내부의 컴포넌트들을 다시 내보내기 방식으로 작성하면, 더 깔끔하게 경로를 지정할 수 있다.

[예시]

//index.tsx
import Domain from "./DomainPage";
import SearchPage from "./SearchPage";
import MatPicker from "./MatPickerPage";
import MatPickerDetail from "./MatPickerDetailPage";
import MyPage from "./MyPage";
import MatPeople from "./MatPeoplePage";
import SearchDetailPage from "./SearchDetailPage/SearchDetailPage";
import MatPlacePage from "./MatPlacePage";
import MatPlacePostPage from "./MatPlacePostPage";
import MatPeoplePickerPage from "./MatPeoplePickerPage";
import NotFoundPage from "./NotFoundPage";
import LoginPage from "./LoginPage";

export {
  Domain,
  SearchPage,
  MatPicker,
  MatPickerDetail,
  MyPage,
  SearchDetailPage,
  MatPeople,
  MatPlacePage,
  MatPlacePostPage,
  MatPeoplePickerPage,
  NotFoundPage,
  LoginPage,
};

각 컴포넌트에서 named export로 내보내기를 하고 있을 때 pages의 index.tsx 파일에서 각 컴포넌트들을 다시 내보낸다.
컴포넌트를 사용할 때에는 절대경로 지정이 되어있기 때문에 src를 생략하고 pages 폴더까지만 지정해주면 폴더 내 index.tsx 파일에서 컴포넌트를 불러오게 된다.

//App.tsx
import {
  Domain,
  MyPage,
  MatPeople,
  MatPicker,
  MatPickerDetail,
  SearchPage,
  SearchDetailPage,
  MatPlacePage,
  MatPlacePostPage,
  MatPeoplePickerPage,
  NotFoundPage,
  LoginPage,
} from "./pages";

 

# 모듈 다시 내보내기

export foo from 'bar.js';

// 위 구문은 아래와 동일하다.
import foo from 'bar.js';
export foo;

export ... from ... 문법을 사용하면 import한 개체를 바로 다시 내보낼 수 있다. 즉 위 코드에서처럼 bar.js 에서 foo를 가지고 온후 바로 내보낼 때 사용한다.

보통 패키지에서 외부에 공개할 기능만 index.js(또는 index.tsx) 에 넣어 내보내기할 때 사용한다. 사용자가 다른 파일을 건드리지 않고, index.js(또는 index.tsx) 파일에서 필요한 기능을 불러와 사용할 수 있다.

 

참고한 블로그)

https://velog.io/@rimo09/React%EC%97%90%EC%84%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B2%BD%EB%A1%9C-%EA%B9%94%EB%81%94%ED%9E%88-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0