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

// 입력한 검색어를 (Enter를 치는 순간) 읽어와서

// url을 바꿔준다.

 

// 입력한 검색어를 (Enter를 치는 순간) 읽어와서

 

일반 (바닐라) 자바스크립트 할때는 우리가 input에 입력한 값을 어떻게 읽어왔지?

바로 value. !!

리액트에서는 (좀 다르다) ... 우리가 읽어오고 싶은 값이 event에 들어가 있다.

 

value안에 입력한 키워드가 있다.

 

console.log~로 테스트해보자!

 

<실행결과>

와이드 를 치고 엔터를 누르면...

상단 일부

 

keyword 와이드

가 console창에 표시된다!!

 

<정리> 

이런식으로 우리가 input 안에 있는 값을 읽어오고 싶을때에는 자바스크립트에서처럼 .value를 쓰는게 아니고

event.target.value를 쓰면 된다(input 안에 있는 값을 읽어올 수 잇다) - 외워두기 -

 

이제 keyword가 뭔지아니까...

 

// url을 바꿔준다.(url 뒤에 파라미터를 추가한다)

(그러기 위해서는) navigate() 함수 사용!

 

파라미터값X

쿼리값O - search하는 추가적인 조건에 대해서는 쿼리로 붙인다.

 

< 쿼리 붙이는 법>

'/?q=${keyword} =  /?q=검색

홈페이지로  q(쿼리)값, 즉 데이터로 갈거다!

우리가 가지고온 keyword값을 가져다가 url을 바꿔준다!

 

<가려진 코드>

    const search = (event) => {
      if (event.key == "Enter"){
        let keyword = event.target.value;
        navigate(`/?q=${keyword}`)
      }
    };

 

<실행 결과>

초기 화면 (상단 일부)

와이드 라고 검색하면

url 이 바뀐다.

 

드레스 라고 검색하면

url 이 바뀐다.

 

 

이제까지  keyword를 읽어와서 그것을 url에 넣어주는 것까지 함!

 

근데 url에 넣어줘도 검색이 안된다. 

이제부터 검색 기능을 넣어보자!

그러기 위해서는 쿼리에 있는 글자(와이드)를 읽어와서 이 키워드(와이드)가 있는지 다시 api에서 검사를 해주어야 한다.