React Router 간략하게 만들기

송이·2023년 1월 20일
1

React

목록 보기
2/3
post-thumbnail

📌 Router를 사용해보자

라우터를 사용한 코드를 살펴보자

<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 해줄 것이다

💡 map함수 사용하기

<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함수를 적절하게 사용하면 복잡한 리액트의 코드를
가독성 있게 만들어줄 것이다

profile
디자인에서 프론트엔드 개발까지 하게 된 구름이 집사😺

0개의 댓글