포스트 검색 기능

이번 시간에는 작성된 포스트 중 검색을 통해서 해당되는 포스트을 불러오는 기능을 정리한다.

검색

이번 개인 프로젝트에서는 작성한 포스트를 검색 기능을 구현해서 해당 포스트를 찾을 수 있도록 작업했다. 처음에는 없던 기획이었지만, back에서 라우터들을 만들고 해보니 한번 넣어볼까? 하고 진행된 작업이다.

Front

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { debounce } from 'lodash';
import { searchPost } from 'actions/post';
import { useDispatch } from 'react-redux';

const SearchForm = () => {
  const [value, setValue] = useState('');
  const dispatch = useDispatch();
  const searchDispatch = useRef(debounce((text) => dispatch(searchPost(text)), 500)).current;

  const onChangeInput = useCallback(
    (e) => {
      setValue(e.target.value);
      // 입력값의 길이가 0보다 클 경우 실행
      if (value.length > 0) {
        searchDispatch(e.target.value);
      }
    },
    [value],
  );

  return (
    <>
      <div>
        <input
        type="text"
        value={value}
        onChange={onChangeInput}
        placeholder="검색어를 입력해주세요."
        />
      </div>
    </>
   );
};

export default SearchForm;

useRef callback

보통 useRef는 리렌더링과 상관없는 값을 저장하거나, 엘리먼트 요소에 접근하기 위해서 사용되곤 하는데, 여기서는 ref가 attact 혹은 detach 될 때 어떤 코드를 실행 시키기 위해서 callback ref를 사용하였다.

lodash debouce

이번 시간에도 lodash를 사용해서 작업을 진행했다. debounce라는 기능을 사용했으며,
간단하게 정해진 시간 뒤에 함수를 실행하는 기능이다.

만약 debounce라는 기능을 사용하지 않았다면? 타자로 입력할때마다 많은 액션이 실행된다.
그 액션은 back 서버에 요청을 하고, DB를 조회하게된다. 그럼 과부화로 안좋은 현상이 일어날거라 생각이 든다. 그래서 debounce를 사용해서 검색어를 입력 후 정해준 시간 뒤에 액션을 한번만 실행하면 그런 과부화는 없을 것이다.

이렇게 입력된 값은 back 서버에 params로 전달한다. 어떻게 요청받는지 확인해보자.

back

params로 전달받은 검색어 즉 키워드는 sequelize에서 제공되는 Op(operator)의 like를 사용해서 조건 검색을 실행한다. like는 해당 키워드가 있는 포스트를 조회한다. 포스트의 제목 및 내용에서 해당 키워드가 있는 포스트만 응답 해줬다.

// back/routes/posts
router.get('/:keyword', async (req, res, next) => {
  try {
    // params로 전달받은 검색어 키워드
    const like = decodeURIComponent(req.params.keyword);
    
    const post = await Post.findAll({
      where: {[Op.or]: [{
        content: {[Op.like]: `%${like}%`}
      }, {
        title: {[Op.like]: `%${like}%`}
      }]},
      order: [
        ['createdAt', 'DESC'],
      ],
      // .. include
    });
    res.status(200).json(post);
  } catch(error) {
    console.error(error);
    next(error);
  }
});

이렇게 검색어를 통해서 포스트를 불러오는 방법에 대해서 정리를 했다.
여기서 더 공부해야할 부분은 useRef다. 이론적인 내용은 알고 있지만 내부에 함수를 넣어서 사용할 수 있다는건 이번 작업을 통해서 알게되었다.

위 방법으로 검색 기능을 사용할 경우에는 웹 브라우저와 모바일 앱 브라우저에서 테스트 시
모바일 네이버 앱에서만 작동이 안된다. 이 문제는 빨리 찾아서 수정을 해봐야겠다...