시작

검색창에 특정 단어가 포함된 포켓몬만 검색 결과창에 보이도록 구현하려고 한다.

---

검색 페이지 구현하기

1. 검색 페이지 만들기

//App.tsx
import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Header from './components/header/Header';
import Loading from './pages/loading/Loading';

const Main = lazy(() => import('./pages/main/Main'));
const Search = lazy(() => import('./pages/search/Search'));

function App() {
  return (
    <Router>
      <Suspense fallback={<Loading />}>
        <Header />
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/search" element={<Search />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

가장 먼저 할 일을 검색페이지를 만드는 것이였다.

원래는 검색페이지를 따로 만들지 않고 하나의 페이지에서 변경될까 했었지만
사용자 경험에서 좋지 않다는 생각이 나서 분리하기로 했다.

2. form 태그에 페이지 연결하기

//SearchBox.tsx
<SearchWrap name="search" role="search" action="/search">
  <IcSearch>
  <Search width="35" height="35" />
  	</IcSearch>
  <SearchInput />
</SearchWrap>

form태그에 action속성을 활용하면 파라미터로 input창에 입력된 값을 추출할 수 있다.

form태그의 action속성

• <form> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.
• <form action="URL">
  form태그 action 속성 - TCP

만약 검색창에 안녕 이라고 입력하고 엔터 칠 경우
http://localhost:5173/search?search=안녕
이런식으로 페이지 url ?뒤에 입력한 내용이 표시된다.

검색 키워드를 알게 되었으니 이제 키워드만 추출해야한다.

처음에는 추출할 함수를 만들어야하나 했지만
URLSearchParams 라는 메소드를 사용해 쉽게 추출할 수 있었다.

URLSearchParams

• URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의합니다.
  URLSearchParams - mdn

//SearchInput.tsx
const SearchInput = () => {
  const urlParams = new URLSearchParams(location.search);
  const searchWord = urlParams.get('search');

  return (
    <label htmlFor="search">
      <SearchInputWrap
        type="search"
        name="search"
        placeholder="키워드를 입력해 주세요."
      />
    </label>
  );
};

export default SearchInput;

URLSearchParams 메소드를 사용하기 위해서는 앞에 new키워드를 붙여줘야 한다.
인자로는 해당 url에서 ?이후의 url을 보내주면 된다.

여기서 location은 JavaScript의 window.location과 동일하게 적용된다.

URL 파라미터 가져오기, query string 추출 방법 2가지 - by Jjiveloper님

3. Redux, useQuery를 활용해 필터링한 데이터 가져오기

이 부분에서 고민이 많았다.
검색 키워드로 추출된 값을 CardList에 전달해야했기 때문이다.

그래서 생각한 방법이 useQuery로 포켓몬 전체 데이터를 불러오고
Redux toolkit에 미리 정의(필터링)된 action에 전달하는 것이다.

그렇다면 전역으로 검색 결과된 데이터를 사용할 수 있다.

// searchPokeList-slice.ts
import { createSlice } from '@reduxjs/toolkit';
import { PokeListT } from '../types/types';

type initialStateT = {
  keyWord: string;
  pokeData: PokeListT[];
};

const initialState: initialStateT = {
  keyWord: '',
  pokeData: [],
};

const searchKeyWordSlice = createSlice({
  name: 'searchKeyWord',
  initialState,
  reducers: {
    getSearchKeyWord(state, actions) {
      state.keyWord = actions.payload;
    },
    getSearchPokeData(state, actions) {
      state.pokeData.push(...actions.payload.filter((el: PokeListT) => el.name.includes(state.keyWord)));
    },
  },
});

export const searchKeyWordReducer = searchKeyWordSlice.reducer;
export const searchKeyWordActions = searchKeyWordSlice.actions;

getSearchKeyWord, getSearchPokeData 두개의 action을 만들었다.
keyWord가 있어야 filter메소드를 통해 원하는 결과 값만 추출할 수 있다.

//SearchInput.tsx
const SearchInput = () => {
  const dispatch = useDispatch();
  const [keyWord, setKeyWord] = useState('');
  const urlParams = new URLSearchParams(location.search);
  const searchWord = urlParams.get('search');

  useQuery({
    queryKey: ['pokeFullList'],
    queryFn: () => getPokemonList(100000, 0),
    onSuccess(data) {
      dispatch(searchKeyWordActions.getSearchKeyWord(searchWord));
      dispatch(searchKeyWordActions.getSearchPokeData(data.results));
    },
    onError(err) {
      console.log(err);
    },
  });

  return (
    <label htmlFor="search">
      <SearchInputWrap
        type="search"
        name="search"
        placeholder="키워드를 입력해 주세요."
      />
    </label>
  );
};

export default SearchInput;

useQuery에서 데이터 가져오기 성공했을 경우
useDispatch메소드를 활용해 데이터와 검색 키워드를 인자로 전달해 줬다.

//Search.tsx
const Search = () => {
  const searchPokeData = useSelector((state: RootState) => state.searchKeyWord.pokeData);
  const navigate = useNavigate();

  const eventBackPage = () => {
    navigate(-1);
  };

  return (
    <SearchContainer>
      <SearchBox />
      <ContWrap>
        <BackBtn onClick={eventBackPage} />
        <span>{searchPokeData.length}건의 포켓몬이 검색되었습니다.</span>
      </ContWrap>
     <PokeSearchContList searchPokeData={searchPokeData} />
    </SearchContainer>
  );
};

export default Search;

// PokeSearchContList.tsx
const PokeSearchContList = ({ searchPokeData }: { searchPokeData: PokeListT[] }) => {
  return (
    <PokeContainer>
      {searchPokeData.length <= 0 && <SkeletonCard />}

      {searchPokeData &&
        searchPokeData.length > 0 &&
        searchPokeData.map((pokemon) => <PokeInfoCard key={pokemon.name} name={pokemon.name} />)}
    </PokeContainer>
  );
};

필터링된 데이터를 useSeletor를 사용 가져오고 props로 전달했다.

검색 창이 잘되는걸 확인 할 수 있다.

---

[번외] 검색창에 검색 키워드 남기기

// SearchInput.tsx
const SearchInput = () => {
  const urlParams = new URLSearchParams(location.search);
  const searchWord = urlParams.get('search');
  const [keyWord, setKeyWord] = useState('');
  useEffect(() => {
    if (searchWord) {
      setKeyWord(String(searchWord));
    }
  }, []);

  const onChangeKeyWord = (e: React.ChangeEvent<HTMLInputElement>) => {
    setKeyWord(e.target.value);
  };

  return (
    <label htmlFor="search">
      <SearchInputWrap
        type="search"
        name="search"
        value={keyWord}
        onChange={onChangeKeyWord}
        placeholder="키워드를 입력해 주세요."
      />
    </label>
  );
};

export default SearchInput;

검색창에 키워드 입력 후 엔터를 할 경우 검색창에 키워드가 그대로 남지 않았다.

useEffect 를 사용해 만약 searchWord가 있을 경우 keyWord의 값을 searchWord로 업데이트 되도록 수정했다.

onChange 이벤트를 사용해 검색창에 입력하는 값을 저장하고 저장된 값을
value에 추가해줬다.

검색창 입력 후 엔터 칠 경우 검색창에 해당 키워드가 잘 표시되었다.
또한, onChange 이벤트를 통해 다른 키워드를 입력 할 수도 있다.

[번외] 검색 결과가 없을 때

이대로 마무리해도 좋지만 사용자 경험을 향상시키기 위해
만약 검색 결과가 없을 경우의 화면도 만들어 줬다.

// Search.tsx
const Search = () => {
  const searchPokeData = useSelector((state: RootState) => state.searchKeyWord.pokeData);
  const navigate = useNavigate();

  const eventBackPage = () => {
    navigate(-1);
  };

  return (
    <SearchContainer>
      <SearchBox />
      <ContWrap>
        <BackBtn onClick={eventBackPage} />
        <span>{searchPokeData.length}건의 포켓몬이 검색되었습니다.</span>
      </ContWrap>
      {searchPokeData.length > 0 ? <PokeSearchContList searchPokeData={searchPokeData} /> : <NothingBox />}
    </SearchContainer>
  );
};

export default Search;

---

마치며

점점 토이 프로젝트가 어느 정도 구체화 되어 가는게 보여서 뿌듯하다.
포켓몬 데이터가 워낙 많아서 검색 결과 페이지를 어떤식으로 구현해야하는지 고민이 많았지만 잘 해결된 것 같다.

이번 작업을 통해 URLSearchParams메소드에 대해 알게 되었다.

또한, 검색창 입력 조건을 걸어두면 좋겠다는 생각이 들었다.
예를 들어 숫자나 특정 단어는 입력할 수 없도록 하면 좋지 않을까 싶다.

추후 좀 더 개선해 봐야겠다.