React pages 폴더 안에 왜 index.js를 넣지? - 아주 사소한 팁

전체적인 앱 내 구조를 만드는데 정답은 없다.

나같은 경우에는 pages 폴더 안에 만들 페이지들을 이름을 잘 정하여 파일만 생성하는 스타일이다.

하지만 해당 페이지와 관련하여 css라던가 더 추가할 파일들이 생기면 복잡해지는건 시간 문제이다.

이런 경우 폴더를 더 만들어 깔끔하게 관리를 해줄 수 있다.

 

이 글은 아래 사진처럼 폴더를 만들어 관리할때 필요한 팁이며 쌩초보 입장에서 아주 유용했던 팁이기에 작성하게 되었다.

아무것도 몰랐을 때는 폴더를 만들고 안에 들어가는 js 파일에도 이름을 다 붙여주었다.

js파일에도 이름을 붙였을 경우 import 해줄때 저 파일의 이름까지 경로에 다 써야했다.

import DetailPage from '../pages/DetailPage/DetailPage1';

 

하지만 index.js 그대로 사용하면

import DetailPage from '../pages/DetailPage';

폴더의 이름까지만 적어주면 된다.

 

왜이렇게 되느냐??

index.js는 가장 기본이 되는 default 파일이기 때문에 자동으로 불러와진다.

 

굳이 폴더 만들때 js 파일 하나하나 이름 지어줄 필요 없다는 뜻

 

끝!