input과 option 으로 url 만들기

Louis·2023년 12월 6일

React encodeURIComponent

안녕하세요! 오늘은 react로 인사를 드립니다!

어제 멘탈이 나갈정도로 어떻게 해야되는지 먼저 겁먹고 고민을 하다보니 아무것도 못 했는데 오늘 그래도 시작이라도 해보자 하고 구글링을 하던 중 제가 생각했던 기능과 유사한 코드를 포스팅한 블로그가 있어서

참고 하고 진행했더니 완벽하진 않지만 제가 원하는 결과가 나와서 이렇게 포스팅으로 기록을 남겨보려고 합니다..!

시작하기전에 아직 초보자라서 코드가 불편하게 길 수 있는 점 양해 부탁드립니다...

그럼 시작해보겠습니다!

먼저 제가 원하는 기능은

검색 후 검색의 키워드를 url로 넘겨서 넘겨진 url에서 넘겨진 키워드를 가지고 그 페이지에 해당하는 키워드의 콘텐츠들을 보여주는 것입니다!

먼저 결과물을 보여드리자면

현재 뼈대만 제작한 상태이며 기능 위주로 봐주시면 감사하겠습니다

input 으로 키워드를 넣고 option을 선택하고 검색을 하면 url이 바뀌며 결과들을 표현할 수 있도록 구현하였습니다

서귀포를 검색하고 option에서 제주도를 선택한 결과입니다

페이지 안에 내용도 바뀌고 주소도 바뀐 모습을 보실 수 있습니다
(search와 select 위치가 바뀌면 좋을 것 같습니다)

코드는 어떻게 되나요?

import React from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useState } from 'react';

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();

  // 선택하거나 작성한 결과 값을 가져옵니다
  const initKeyword = searchParams.get('keyword');
  const initSelectParam = searchParams.get('selectParam');

  const [keyword, setKeyword] = useState(initKeyword || '');
  const [selectParam, setSelectParam] = useState(initSelectParam || '');
  // const courses = getCourses(initKeyword);

  const handleKeywordChange = (e) => setKeyword(e.target.value);
  const handleSelectChange = (e) => setSelectParam(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault(); // 페이지 이동시 불필요한 새로고침을 막아주기 위한 코드
    // setSearchParams(keyword ? { keyword } : {});

    setSearchParams({
      keyword: keyword || undefined,
      selectParam: selectParam || undefined
    });

    // 새로운 URL 경로를 검색어와 함께 구성합니다.
    const newPath = keyword ? `/search/${encodeURIComponent(keyword)}/select/${encodeURIComponent(selectParam)}` : '/';
    const noSelect = keyword ? `/search/${encodeURIComponent(keyword)}` : `/`;
    const nokeyword = selectParam ? `/select/${encodeURIComponent(selectParam)}` : `/`;

    // keyword와 selectParam 둘 중 하나가 빈칸일 결우를 대비하여 만든 코드
    if (keyword !== '' && selectParam !== '') {
      navigate(newPath);
    } else if (keyword === '' && selectParam !== '') {
      navigate(nokeyword);
    } else if (keyword !== '' && selectParam === '') {
      navigate(noSelect);
    }
    console.log({ keyword, selectParam });
  };

  return (
    <form onSubmit={handleSubmit}> // form태그에 onSubmit을 넣어 기능들을 가능하게 만듭니다
      <input
        name="keyword"
        value={keyword}
        onChange={handleKeywordChange}
        placeholder="산책하고 싶은 지역을 검색해주세요"
      ></input>
      <select name="selectParam" value={selectParam} onChange={handleSelectChange}>
        <option value="">지역을 선택해주세요</option>
        <option value="서울">서울</option>
        // 더 많은 option은 현재 코드에서 생략하겠습니다
      </select>
      <button type="submit">검색</button>
    </form>
  );
}

export default Search;

const newPath = keyword ? `/search/${encodeURIComponent(keyword)}/select/${encodeURIComponent(selectParam)}` : '/';
    const noSelect = keyword ? `/search/${encodeURIComponent(keyword)}` : `/`;
    const nokeyword = selectParam ? `/select/${encodeURIComponent(selectParam)}` : `/`;

    // keyword와 selectParam 둘 중 하나가 빈칸일 결우를 대비하여 만든 코드
    if (keyword !== '' && selectParam !== '') {
      navigate(newPath);
    } else if (keyword === '' && selectParam !== '') {
      navigate(nokeyword);
    } else if (keyword !== '' && selectParam === '') {
      navigate(noSelect);
    }
    console.log({ keyword, selectParam });
  };

삼항연산자를 통해서 keyword, selectParam 둘 중에 하나가 빈칸이여도 빈칸을 제외하고도 url 이동을 할 수 있도록 구현하였습니다
그렇게 하여서 둘 다 입력을 하면서 조금 더 자세한 결과물을 얻을 수 있지만 둘 중 하나만 작성 한다면 자세하진 않지많 조금 더 넓은 범위를 검색할 수 있게 하였습니다

그리고
useNavigate 들을 활용해서 이동할 수 있게 만들어주었습니다

Router 구조는 어떻게 되나요?

import Layout from 'shared/Layout';
import Home from 'pages/Home';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

import SearchResultPage from 'components/SearchResultPage';

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/search/:keyword/select/:selectParam" element={<SearchResultPage />} />
          <Route path="/search/:keyword" element={<SearchResultPage />} />
          <Route path="/select/:selectParam" element={<SearchResultPage />} />
          <Route path="*" element={<Navigate replace to="/" />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

이렇게 작성하였습니다 keyword, selectParam 둘 다 입력이 되면

<SearchResultPage/> 페이지로 넘어가고 둘 중 하나만 입력해도 <SearchResultPage/> 페이지에 넘어갈 수 있도록 구현하였습니다

위에서도 말씀드렸지만 오류 없이 모두 넘길 수 있도록 Router 구조를 이렇게 작성해보았습니다

그리고 혹시라도 주소가 잘 못 되었거나 입력에서 오류가 나는 경우에는 홈으로 이동할 수 있도록 코드도 작성해두었습니다 : )

수정해야되는 부분

지금 현재 url에 키워드가 들어가서 이동이 가능하지만 추후에 지도 API를 가져오는 과정에서 지도의 기능들을 언급할 때 어떤 작업이 필요할지 몰라서 확정을 지을 수는 없습니다 현재는 키워드를 넘겨주면 콘텐츠들을 보여줄 수 있을 것 같다고 가정을 하고 작업을했기 때문에 현재는 이러한 작업을 진행하였습니다

추후에 디테일한 부분을 잡아야하며, 코드를 조금 더 간단하게 정리하고, url에 보일 때 더 알맞게 표현이 될 수 있도록 수정을 진행해야될 것 같습니다