[TIL/React] 2023/03/06

useSearchParams: URL 쿼리값을 읽어보자

'Query String'이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 '미리 협의된 데이터'를 'parameter'를 통해 전달하는 것을 의미한다.

지금 작성하고 있는 TIL의 주소를 확인했다. '/write'라는 parameter에 '? 이하' 부분이 있다. 예시가 적절하지는 않은데, 보통 '? q= ~~~'의 형식으로 많이 사용된다.

Query String을 간단한 예제를 통해 사용했다. 추가적으로 쿼리값을 불러오는 작업도 진행했다.

Homepage.js 파일에 'go to product page'라는 버튼을 하나 생성했다. 버튼을 클릭하면 'goProductPage'라는 함수가 작동이 될 것이다.

페이지 사이를 이동하는 방법 중 하나인 useNavigate를 활용했다. 'goProductPage'라는 함수는 곧 navigate의 괄호 안에 있는 경로로 이동하게 하는 함수이다.

쿼리값을 읽기 위해 'useSearchParams'라는 React Hook을 사용했다. useState를 활용하는 방식과 매우 유사하다. 'query.get("q")'를 콘솔에 입력했다.

'Query String'이 무엇인지, 그리고 해당 값을 어떻게 불러오는지 학습했다.

Redirect: 페이지를 보호하는 법

Profile page의 경우, 실제로 로그인을 완료한 사람에게만 보여야 한다. 로그인도 하지 않았는데 누구나 해당 페이지에 접근한다면... 안된다.

이처럼, '보호받아야 하는 특정 페이지'를 위한 라우팅 시스템을 구현하려면 Redirect의 개념이 필요하다.

한국어 뜻이 굉장히 직관적으로 다가온다.

가장 먼저 'user page'와 'login page'를 만들었다. user page는 login이 정상적으로 되기 전까지는 현출되면 안되는(=보호받아야 하는) 페이지이다.

'PrivateRoute'라는 컴포넌트를 생성했다. 로그인이 정상적으로 됐으면(=true이면) 바로 user page로 가고, 로그인이 되지 않으면(=false이면) 다시 login page로 'Redirect'하는 역할을 수행한다.

'Navigate'를 import한 것을 확인할 수 있는데, 일전에 활용했던 useNavigate와는 전혀 다른 'Redirect'의 역할을 한다.

useState에 초기값으로 true가 주어졌고, authenticate가 true이면 user page를 반환하게 된다.

쇼핑몰 프로젝트: 라우터 세팅

회고

useState를 설정하다가 알게 된 단어... 자칭 밑바닥부터 올라온 래퍼들이 좋아할 것 같은 단어인데 ㅋㅋㅋ 울림이 있다. 영어단어 공부까지 끝! 내일도 화이팅!