4. 쇼핑몰 웹사이트 만들기 (1)

 

code . 을 치면 vscode의 초기 화면이 보이고 옆에 바가 생긴다.

 

<알고리즘>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요)

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다.

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.

 

페이지 수가 여러개이면 ,, 리액트는 페이지를 여러개 만들 수 없다. 그래서 우리는 리액트 라우터라는 것을 설치해서 눈속임을 해야한다.

 

그럼 리액트 라우터를 설치해보자!!!

 

https://reactrouter.com/start/framework/installation

Installation | React Router

 

 

 

이제 라우터 세팅을 해줘야 한다.

 

 

라우터 세팅 완료!!!

 

 

<Routes> </Routes>로 감싸주면 라우트 별로 스위치를 하는, 즉 왔다갔다 하는 역할을 한다.

(그 안에 <Route> </Route>를 넣어준다.)

 

페이지가 3개이기 때문에 3개를 만들어준다.