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

이제 우리는...

쿼리에 있는 글자를 가져와서 읽고 검색하기를 해주어야 한다!

ProductAll.js 페이지에서 한다!

 

 

(그 전에)

let url = `http://localhost:5000/products;

지금은 모든 데이터를 다 가져온다.

 

이제는 쿼리,즉 키워드가 있으면 쿼리를 붙여서 데이터 검색을 할것이다.

 

일단!

url에 있는 쿼리값을 읽어오자!

 

useSearchParams 라는 리액트 훅 사용

 

searchQuery는 q라고 시작하는 아이템을 가져다가 searchQuery에 넣어준다.

 

console창에서 확인해본다.

 

(* getProducts를 통해서 api 호출을 할 때에  그냥 api를 호출하는 것이 아니라 쿼리에 있는 값을 뒤에 넣어줄거다. *)

 

http:// ~ products?q=${searchQuery} : 받은 searchQuery값을 뒤에 붙여준다.

 

만약에 searchQuery값이 없는 경우에는?

default, 아무 것도 없는 빈 string(" ") 을 넣어준다.

 

<실행결과>

초기 화면 (상단 일부)

 

쿼리값은? 이라고 출력되어 있다

 

 

드레스 라고 검색(입력)하면 url은 바뀌지만 console창에 출력되는건 없다. ㅜ

(드레스와 마찬가지로...)

와이드 라고 검색(입력)하면 url은 바뀌지만 console창에 출력되는건 없다. ㅜ

 

이뜻은? getProducts 함수가 다시 실행이 안된다는 의미!!

 

......(12) -2탄 = 3:10~7:20

 

 

<알고리즘 단계>

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

//1-1. 네비게이션 바 (만들기.생성) !!!  -완료- 

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

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

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

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

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

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

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

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