Router 와 Switch Componet / BackApi

Page이동에 효율적인 방법이 없나 ?

State 변경에 의한 page 변경시에 효율적이거나 많이 쓰고있는 방법이 없나 몰색하던 도중 Router와 Switch 태그에 대해 알게되었다.

Router 컴포넌트 url을 맵핑시켜 원하는 Page에 이동하게 하는것이다.

Switch를 사용하는 이유는 기존에 Route 컴포넌트만을 사용했을때는 ErrorPage를 보여줄 때 path값을 비우면 모든 url과 mapping 되는 문제가 발생한다고 한다.

근데 이거 웬일 ? 문제가 생겨서 보니 Switch 는 React 6 version 이후 사라졌다고 한다. 대신 Routes를 사용한다고 한다.

에라 어짜피 기능은 둘다 똑같겠지 함 해보자 !

거두절미하고 나의 App.js 를 보자

return (
    <Router>
      <Routes>
        <Route exact element={<Login/>} />
        <Route path="/main" element={<MainContent/>} />
      </Routes>
    </Router>
 );

사용법은 따로 설명할 필요도 없이 굉장히 직관적이고 명료하다 ! 다음부터도 이렇게 사용해야지 !

필자는 React로 page를 만들 때 느낀점이 axios(or fetch)를 사용할시에 component가 있는 파일에 같이 선언해주었는데 굉장히 더럽고 가독성이 떨어져서 다음 프로젝트 진행시에는 한 파일에 api를 몰아넣고 관리하면 더 깔끔하게 할 수 있지않을까 생각했고 사수GPT님께서 좋은 방법이라고 칭찬해주셨기에 이번에는 api를 한곳에 몰아넣고 진행하려고 한다.