1. 상대 경로 (Relative Path)
- 상대 경로는 현재 파일의 위치를 기준으로 경로를 작성하는 방식입니다. ../, ./ 같은 점을 사용해 상위 폴더나 현재 폴더를 가리키면서 파일을 가져옵니다.
- 장점:별다른 설정이 필요 없으며, 프로젝트 내에서 바로 사용 가능합니다.
소규모 프로젝트에서 간단하게 파일을 가져올 때 유용합니다.- 단점: 폴더 구조가 깊어질수록 경로가 복잡해집니다.
파일 경로가 변경되면 상대 경로도 모두 수정해야 하는 불편함이 있습니다.
2. 절대 경로 (Absolute Path)
- 절대 경로는 프로젝트의 루트 디렉토리를 기준으로 경로를 작성하는 방식입니다. 이를 사용하면 상대 경로와 달리 ../와 같은 점을 사용할 필요 없이 파일의 위치를 명확하게 지정할 수 있습니다.
- 장점: 폴더 구조가 깊어지더라도 경로가 복잡해지지 않습니다.
파일 위치가 변경되더라도 경로 수정이 상대적으로 간편합니다.- 단점: 절대 경로를 사용하려면 jsconfig.json 또는 tsconfig.json 같은 파일을 설정해야 합니다.
3. 절대 경로 사용방법
- 이내용은 사실 config.js를 설정하여 경로를 설정해야하지만 여기서 알려줄 내용은 그보다 간단하게 절대경로를 설정하는 방법임
- 아래 디렉토리의 구조처럼 폴더안에 사용할 컴포넌트를 넣고 index.js파일을 생성함
- 그후 index.js의 파일을 아래와 같이 export해줌, 이때 각 컴포넌트는 export 상태여야함 export default 상태가 아님
- 그후 export한 컴포넌트를 사용할 컴포넌트에서 export한 컴포넌트를 import 하면 아래와 같은 형태로 import가 가능함
- 만약 절대경로를 사용하지 않으면 컴포넌트를 하나하나 import 하기때문에 코드가 지저분해질수도 있음!