Next.js 13 querystring 이용해 라우팅하기(useSearchParams이용)

문제점

이번 프로젝트에서는 아이디찾기페이지와 비밀번호찾기페이지가 분리되어있지않고, 통합되어있었습니다.

통합된 페이지안에서 아이디 찾기 버튼을 누르느냐, 비밀번호 찾기버튼을 누르느냐에 따라 컴포넌트만 설정시켜주면 됩니다.

이건 문제가 아니었습니다.

 

문제는, 아이디찾기버튼을 누르면 라우팅이 된다음 아이디찾기컴포넌트가 나와야하고, 비밀번호찾기버튼을 누르면 라우팅이 된다음 비밀번호찾기컴포넌트가 나와야하는데, 이 두 컴포넌트가 한 페이지에 있으니 라우팅을 어떻게 시켜야하는지입니다. 조금은 애매했습니다.

 

해결책

제가 생각한 방법은 두가지였습니다.

 

1. 이전에 아이디찾기 or 비밀번호 찾기 버튼을 클릭하면 state로 값을 저장시키고, 아이디/비밀번호찾기 페이지에서 저장된 state를 불러와서 해당 state에 따라 아이디찾기 or 비밀번호 찾기 컴포넌트를 호출해준다. 

-> 현재 프로젝트에서는 별도의 클라이언트컴포넌트를 사용하지않기때문에 React의 Context API를 이용해야하는데, 이런 사소한 문제 하나때문에 Context API를 별도로 설정해야하는건 좀 비효율적인 것 같았습니다.

 

2. 쿼리스트링을 통해 아이디찾기 or 비밀번호 찾기 버튼을 클릭할때 별도의 값을 넣어주자. 그리고 그 쿼리스트링값에 따라 아이디찾기 컴포넌트를 호출시킬지, 비밀번호컴포넌트를 호출시킬지 설정해주자.

-> 제가 생각하기에는 다른 방법을 더 찾을필요 없이 가장 좋은 방법이었습니다. 별도의 설정도 필요없고, 애초에 라우팅을 시켜주는김에 쿼리스트링만 추가해주면 되니까요. 

---

해결과정

1. 라우팅 path에 쿼리스트링 첨부해주기

-> 아이디 찾기버튼과 비밀번호찾기버튼이 동일한 주소 'auth/find'이지만, 쿼리스트링만 '?find=email'과 '?find=password'로  다릅니다.

 <button
              type="button"
              className="w-[140px]"
              // 라우팅 + 쿼리스트링 설정
              onClick={() => router.push('auth/find?find=email')}
            >
              아이디(이메일)찾기
            </button>
            <div className="w-[38px] text-center">|</div>
            <button
              type="button"
              className="w-[99px]"
              // 라우팅 + 쿼리스트링 설정
              onClick={() => router.push('auth/find?find=password')}
            >
              비밀번호 찾기
            </button>

 

2. 아이디찾기&비밀번호찾기 페이지에서 쿼리스트링값을 읽어내기 + 읽어낸 쿼리스트링값을 초기값으로 설정해주기

useSearchParams()는 별도의 라이브러리가 아닌 Next.js 13의 API입니다. 
useSearchParams공식문서로 이동

// 아이디찾기&비밀번호찾기 페이지에서 쿼리스트링값을 읽어내기
  const searchParams = useSearchParams();
  const search = searchParams.get('find');
  
// 읽어낸 쿼리스트링값을 초기값으로 설정해주기
  const [findEmail, setFindEmail] = useState(search);

 

3. 초기값으로 설정해준 state에 따라 컴포넌트를 달리 호출해주기 

{findEmail === 'email' ? <IDFindBox /> : <PWFindBox />}

---

해결

잘 작동합니다.