폴더 안의 파일을 모두 import 하는 방법

개발 요구사항 중에 config 파일을 입력하면, 메뉴가 자동으로 생성되는 기능이 있었습니다.

react router dom의 Router 안에 Link 메뉴가 생성되는 것은 map 메서드를 통해 생성이 가능하지만 Switch 컴포넌트는 수작업을 해주어야 해야합니다.

 

하지만 컴포넌트 파일이 없을 경우에는 404페이지가 자동으로 뜨게하고 싶어서 찾아보았습니다. 이런 특수한 사항이 아니라면 역시 권장하는 방법은 아닐것 같습니다.

 

const Pages = importAll(require.context("./pages"));

function importAll(r) {
  let files = {};
  r.keys().map((item, index) => {
    files[item.replace("./", "")] = r(item);
  });
  return files;
}

 

이 함수를 통해 pages폴더 안에있는 모든 파일을 Pages라는 변수에 담습니다.

 

<Switch>
	<Route exact path="/">
		{Pages["Home"] ? Pages["Home"].default : Pages["NotFound"].default }
	</Route>
	<Route>
		{Pages["NotFound"].default}
	</Route>
 </Switch>

 

위와 같이 Pages 변수안에 파일 이름으로 module이 담기게 되고,  모듈안의 default 값을 넣어주면 됩니다.