React 절대경로

그냥차차·2024년 10월 25일

리엑트

목록 보기
9/10
post-thumbnail

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 하기때문에 코드가 지저분해질수도 있음!
profile
개발작

0개의 댓글