안녕하세요!
오늘도 포스팅을 하네요 ㅎ 오늘은 패스할까 하려다가 정리하면 좋을 것 같은 내용이기도 하고 좀 자신있게 이해한 부분인 것 같기도 해서 이렇게 포스팅을 남깁니다..!
여러분들 요즘 갑자기 엄청 추워졌는데 몸은 좀 어떠신가요? 저는 갑자기 코가 얼얼해졌습니다... 원래 엄청 건강한 몸이었는데 캠프하면서 몸이 많이 망가지는 것을 경험하고 있습니다...ㅠ 아프다고 공부를 미루기에는 시간이 없고...
그래도 어떻게 하겠습니까! 해야지요!
그러면 React Router Dom에 대해 간단하게 알아봅시다!
먼저 React Router Dom이 뭐에요?
네 React Router Dom은 페이지를 구현할 수 있게 해주는 패키지입니다 여러페이지를 쉽게 왔다 갔다 하면서 할 수 있는 기능이라고 생각 하시면 됩니다 ㅎ
오오!! 그러면 어떻게 설치하고 시작하죠?
네네 그걸 제가 알려드립니다 ㅎ
저는 yarn 기준으로 했기 때문에 yarn으로 설명드리도록 하겠습니다
vscode 터미널에서 yarn add react-router-dom 이라고 타이핑하고 엔터를 통해 설치를 진행해줍니다!
음... npm 같은 경우는 npm install react-router-dom 으로 설치 해주시면 될 것 같습니다
설치 했어요! 그럼 이제 어떻게 사용하나요?
그 부분 또한 제가 알려드리겠습니다 ㅎ
먼저 src 폴더에 pages, shared 폴더를 만들어줍니다
pages는 우리가 흔히 눌렀을 때 나오는 페이지들을 담은 폴더라고 생각하시면 되고
shared 폴더의 Router.js 는 웹사이트를 어떤식으로 구성할 것인지를 결정하는 곳이라고 생각하시면 될 것 같습니다
shared 폴더에 있는 Router.js 파일을 보여드리도록 하겠습니다
저는 이런식으로 구성하였습니다
먼저 dom 구성은 BrowserRouter -> Routes -> Route
순서대로 진행을 했습니다
이 말을 다르게 해석하면 공통된 요소들을 BrowserRouter이나 Routes에 넣어 더욱 편하게 코드 관리를 할 수 있겠죠?
네네
Route 코드들이 신기해요..
네네 path, element 라고 적혀있죠?
어려울 것 하나 없는 코드입니다
천천히 해석을 해보겠습니다
먼저, path 같은 경우는 url을 결정하는 코드라고 생각하시면 될 것 같습니다
/ 같은 경우는 주로 홈페이지 혹은 메인페이지를 노출하게 됩니다
그 이후 알맞는 경로로 파일을 연결해주면 되겠죠?
그리고 element는 그 해당 url에 보여줄 파일이라고 생각하시면 됩니다
위 코드로 예시를 들면
<Route path="about" element={<About />} />
/about url에 <About /> 폴더의 내용들을 보여주겠다 라고 생각하시면 될 것 같습니다!
이동은 어떻게 하면 되나요..?
네네 이동은 당연히 특정 버튼을 클릭해서 이동하는 것이 가장 편리하겠죠?
그래서 우리는 주로 button을 만들어 onClick을 통해 페이지 이동을 하게 됩니다
Home 컴포넌트에 있는 코드로 예시를 들어보겠습니다
위에 보이시는 코드는 Home 컴포넌트 코드입니다
button 태그에 onClick을 두어 navigate를 연결해줍니다
이때 navigate를 연결해주는 이유는 페이지 이동시 새로고침을 막기 위해서 입니다
우리가 열심히 useState로 데이터를 랜더링 해주었는데 새로고침이 되어서 처음으로 돌아간다면 의미가 많이 없어지겠죠...?
그래서 새로고침 없이 페이지 이동을 하기 위해서 useNavigate 를 사용하게 되는 것입니다
네! 오늘은 간단하게 React Router Dom에 대해 알아보았는데요
제가 설명을 잘 했는지 모르겠지만 React Router Dom을 사용한다면 엄청나게 효율적으로 코드관리를 할 수 있습니다!
헤더와 푸터를 가만히 두고 안에 들어갈 페이지 요소들만 변경을 한다던지 하는 식으로 코드를 구현해도 좋을 것 같네요!
네!
오늘은 이렇게 짧게 마무리 하도록 하겠습니다!
저도 더 공부를 해야될 것 같긴하네요...ㅎ
오늘도 여러분 빠이팅하구요!
그럼 우리는 또
행복하자구요~!
