[2023.05.05 개발 일지] 리액트 실시간 검색 구현하기

[2023.05.05 개발 일지] 리액트 실시간 검색 구현하기

주요 업무 내용

• SearchResult 구현
• input custom hook 구현

SPA로 구현된 사이트에서 자주 볼 수 있는 실시간 검색을 구현해보려고 했다.

여러 모로 생각할 점이 많은데 UI 구현부터가 어지러웠다.

다양한 방법이 있겠지만 보통은 input에서 검색어를 입력하면 input 아래에 리스트가 나타나는 형태일 것이다.

여러 사이트를 찾아보면서 최대한 깔끔하고 쉽게 UI를 구현하려고 했는데 그것도 어렵다.

대략 이런 느낌인데 왜 저 영역이 나타나지 않는 건지 헤맸다.

position의 문제인가 해서 부모요소와 자식요소의 position과 관련된 스타일을 변경해보고 input, form, header 영역까지 스타일을 하나씩 제거해보면서 원인을 발견했다.

원인은 header 영역에서 overflow 값을 hidden으로 설정한 것이었다.

이게 왜 설정 되어있었는지 정확히 기억나지 않는데 아마도 헤더 영역의 끝 부분이 잘리는 현상때문에 설정했던 것으로 기억한다.

스타일을 지우니 SearchResult 영역이 제대로 나타난다.

css는 결과를 알고나면 납득을 하지만 그 원인을 알아내는게 참 어렵다.

많은 개발자들이 css를 어려워 하는데 그런 이유도 있지 않을까 싶다.

그 다음 검색하는 동안에는 배경을 검게 만드는게 더 깔끔하고 잘 보이기 때문에 Backdrop을 구현했다.

BackDrop의 스타일링 자체는 어렵지 않고 Modal을 구현해봤다면 한 번씩은 사용해볼 것이다.

Search를 구현하는 것도 결국 Modal과 다르지 않다.

이제 여기에 Search Input과 Search Result만 활성화 되도록 구현하면 된다.

결과적으로는 이런 모습이 될텐데 input에 pokemon의 id나 name으로 api를 호출하고 Link를 통해서 포켓몬 상세페이지로 이동한다.

이름을 한국어로 입력해서 찾을 수 있으면 좋겠지만 api를 영문명으로 호출해야하기때문에 한글명을 영문명으로 바꾸거나 한글명의 포켓몬의 id를 알아내야한다.

당장에 생각나는 방법은 제공되는 api로는 할 수 없는 것 같고 한글명과 영문명을 제공하는 다른 사이트에서 정보를 가져와서 별도의 파일로 만든 후 mapping해서 api를 호출해야하지 않을까 싶다.

직접 백엔드를 구축하지 않으니 여러모로 불편한 점이 많다.

그래서 프론트엔드 개발자와 백엔드 개발자가 api에 대해서 회의를 하는 것 같고 프론트를 구현하는 입장에서 백엔드 개발자에게 잘 설득해야 일하기 편해지겠다는 생각이 들었다.

import { useReducer } from "react";

import { INPUT } from "../constants/actionTypes";

import { FOCUS } from "../constants/actionTypes";

import { BLUR } from "../constants/actionTypes";

import { RESET } from "../constants/actionTypes";

const initialInputState = {

  value: "",

  isFocused: false,

  isTouched: false,

};

const inputStateReducer = (state, action) => {

  if (action.type === INPUT) {

    return {

      value: action.value,

      isFocused: state.isFocused,

      isTouched: state.isTouched,

    };

  }

  if (action.type === BLUR) {

    return { value: state.value, isFocused: false, isTouched: true };

  }

  if (action.type === FOCUS) {

    return { value: state.value, isFocused: true, isTouched: false };

  }

  if (action.type === RESET) {

    return { value: "", isFocused: false, isTouched: false };

  }

  return initialInputState;

};

const useInput = () => {

  const [inputState, dispatch] = useReducer(

    inputStateReducer,

    initialInputState

  );

  const valueChangeHandler = (event) => {

    dispatch({ type: INPUT, value: event.target.value });

  };

  const inputFocusHandler = () => {

    dispatch({ type: FOCUS });

  };

  const inputBlurHandler = () => {

    dispatch({ type: BLUR });

  };

  const reset = () => {

    dispatch({ type: RESET });

  };

  return {

    value: inputState.value,

    isFocused: inputState.isFocused,

    isTouched: inputState.isTouched,

    valueChangeHandler,

    inputFocusHandler,

    inputBlurHandler,

    reset,

  };

};

export default useInput;

custom hook과 useReducer를 통해서 input의 재사용과 집중화를 위한 연습을 했다.

input이 focus가 되어있고 텍스트가 한 글자라도 입력되어야 SearchResult가 보여야 한다.

또한 api 호출 결과가 없을 경우 오류 상태를 갱신하고 결과가 없다는 것을 보여줘야 한다.

input의 onFocus와 onBlur를 통해서 input을 선택했을 때와 input 밖을 선택했을 때의 상태에 따라 SearchResult display를 설정했다.

또한 inputState의 value값의 길이가 0보다 클 경우에만 SearchResult가 보이도록 했다.

api 호출 시 try catch문을 활용하여 오류 상태를 갱신하고 오류 시에는 검색 결과가 없다는 것을 보여 주었다.

사용자 입력을 받을 때 일정 시간의 입력을 기다린 후 api를 호출 함으로써 api호출을 줄이도록 하는 디바운싱도 적용해야 한다.

그리고 portal을 통한 backdrop까지 적용하면 마무리 될 것 같다.