React 복습 / useSearchParams()

useSearchParams()

• 요청된 쿼리를 제공해주는 hook
  

• 쿼리를 담아서 searchParams에 담아줌
  
  

=> console에 찍어서 값을 확인해보면 요청된 파라미터의 값을 출력 하는 것을 알 수 있음

useSearchParams() 를 활용해서 오늘 기분 출력해보기

1. 오늘의 기분의 이미지를 import 해서 입력된 쿼리의 id에 따라서 각 이미지들의 import 값을 switch 문으로 조정해주기

2. Contact 컴포넌트가 호출되면 기분 이미지들을 위의 import 를 활용해서 출력

require

• 지금 사용하는 언어는 jsx 라는 리액트 형식으로 js 를 짠 것임 그래서 일반 js와 다름
  => 그래서 src 안에 바로 주소값을 넣으면 인식이 안됨 (그냥 string 값으로 인식함) 그러므로 require 을 활용해서 “이 경로는 이미지 경로입니다!” 라는 것을 알려 준 수 있음

3. 오늘의 기분을 출력하기위해 SelectEmotion 컴포넌트를 호출

4. SelectEmotion 컴포넌트에서 useSearchParams() 를 활용해서 url의 파라미터 값을 가지고와서 저장해줄 수 있음

5. 이 부분은 그냥 확인용, location을 활용해서 path 값 search 값을 콘솔에 출력

6. 없는 id값을 받았을 때의 기본값을 미리 seleted_item에 저장함

7. emotionList 객체에 담긴 id 값과 useSearchParams()로 받은 파라미터의 id 값을 filter로 비교

⇒ 비교 후 일치한 값의 데이터(find_item[0])를 seleted_item 에 저장함
⇒ 일치하지 않을 경우 6번에서 정한 기본값을 저장 함

8. selected_item 의 각 값을 출력

=> 1번 기분인 "완전 좋음" 이 출력 된 것을 확인할 수 있다.

관련노션

https://www.notion.so/Router-009a4c47801645728d8a7b30edcc730d

git

https://github.com/winsam003/MyCode