라우터를 사용한 코드를 살펴보자
<Router>
<Switch>
<Route path="/" exact>
<HomePage />
</Route>
<Route path="/blog" exact>
<ListPage />
</Route>
<Route path="/blog/create" exact>
<CreatePage />
</Route>
<Route path="/blog/edit" exact>
<EditPage />
</Route>
</Switch>
</Router>
라우터가 많아졌을 때 혹은 더 많이 생성해야할 때 코드를 간략하게
만들 수 있는 방법이 있다 그것은 바로 map함수를 이용하는 것
<Router>
<Switch>
[{
<Route path="/" exact>
<HomePage />
</Route>},
{
<Route path="/blog" exact>
<ListPage />
</Route>},
{
<Route path="/blog/create" exact>
<CreatePage />
</Route>},
{
<Route path="/blog/edit" exact>
<EditPage />
</Route>}]
</Switch>
</Router>
예를 들어 이런식으로 배열에 담아 축약하고 싶을 때 사용하는 것이다
for문을 사용하게 되면 번거로워지지만
map함수를 사용하게 되면 for문보다 간단해진다
const routes = [
{
path: '/',
component: HomePage
},
{
path: '/blog',
component: ListPage
},
{
path: '/blog/create',
component: CreatePage
},
{
path: '/blog/edit',
component: EditPage
},
];
먼저 routes라는 이름을 가진 배열을 만들어준다
배열의 내용은 path의 링크와 import 해줄 컴포넌트를 적어준다
이 배열은 나중에 컴포넌트 파일로 export 해줄 것이다
<Router>
<Switch>
{routes.map((route) => {
return <
Route key={route.path}
exact path={route.path}
component={route.component}
/>;
})}
</Switch>
</Router>
기존에 라우터를 사용한 코드의 Route들을 지우고
만들었던 배열 routes를 통해 map함수를 만들어준다
map함수의 이름은 자유롭게 생성하고
exact path와 component는 배열 값을 불러와주면 된다
여기서 key값은 넣지 않으면 오류가 생기기 때문에 꼭 넣어준다
이렇게 Router의 코드를 간략하게 만들어보았다
이제 path를 추가할 때 배열 추가하면 자동적으로 만들어지는 것이다
map함수를 적절하게 사용하면 복잡한 리액트의 코드를
가독성 있게 만들어줄 것이다