[본 캠프 27일차] React 스탠다드 5차 수업

redux 포기 스트레스만 받음 zustand 배울게요

 

react router dom 

이제 spa 로 페이지 이동하는 방법을 배운다.

 

기본적으로 <BrowswerRouter> 태그에 <Routes> 태그가 필요하고 그안에 이제 이동할 <Route> 태그를 사용하고 <Route> 태그는 path 로 이동할 장소와, element 로 해당 장소의 내용들을 불러와 사용할거다.

 

처음 기본 페이지는 "/" 로 되어있고 element={<Home />} 으로 해당 내용을 가져오는데, Home.jsx 에서는 navigate 설정을 해줘 app.jsx 에서 사용할 수 있게 해준다. 아래처럼 navigate 를 만들어 onclick 버튼으로 이동할 수 있는 내용을 app.jsx 에서 불러와 사용한다.

 

 

아래는 button 말고 Link 태그로 하이퍼링크 처럼 글씨를 누르면 해당 페이지로 이동할 수 있게 하는 태그이다.

그리고 location 이라는걸로 해당 페이지가 무슨 페이지인지 알 수 있는데, 아래 console.log(location) 을 쳐보면

개발자 도구에서 object 형식에 객체가 나오는데 pathname 으로 무슨 페이지인지 불러올 수도 있다.

 

 

다음으로 children 을 사용해서 페이지가 바뀌더라도 바뀌지 않는 레이아웃 형태의 컴포넌트가 필요할 수 있다.

<Layout> 을 사용해서 <Routes> 를 감싸 사용할 수 있다.

 

Layout.jsx 컴포넌트를 만들어 props 로 children 을 넣어주고 공통 레이아웃을 고정해 그 사이에 내용이 들어올 수 있게 

위치를 시켜줬고 <div> 로 style 도 씌울 수 있게 해줬다.

 

Dynamic Route, useParams, outlet

 

Dynamic Route

mypage 내부에서도 여러 카테고리가 존재할 때, mypage/1,2,3,4 ~~ 등 다른 카테고리로 넘어가기 위해

Dynamic Route 를 사용한다.

아래 예시를 보면 mypage 뒤에 /:id 를 입력하여 mypage 내의 다른 카테고리로 이동할 수 있다.

 

<Route path="MyPage/:id" element={<MyPage />} />

 

useParams

이건 좀 복잡하니까 나중에 알아보자

 

Outlet

Mypage 는 그대로 놔두고 그 안의 내용들만 가져오고 싶을 때 아래처럼 사용할 수 있다.

<Route path=Mypage>

     <Route path=myProfile>

     <Route path=myCredit>

</Route>

Route 안에 Route 를 만들어 하위 페이지를 만들고 Mypage에서 원하는 위치에 myProfile 이나 myCredit이 나오게 하고 싶으면 원하는 위치에 <Outlet /> 을 이용하여 해당 페이지내용이 나오게 할 수 있다.

 

Supabase

프론트엔드에 온전히 집중하기 위해 사용하지만 내일 해야지