🧐 검색 기능 구현

무수한 사이트를 접속하시다보면, 검색 기능을 마주하게 됩니다. 이번 프로젝트를 통해 서버와의 통신의 꽃이라고 할 수 있는 다소 깜찍한 검색 기능을 구현해보았습니다. 실제로 서버에서는 영화 정보만 제공을 하고, 클라이언트에서는 해당 데이터만 필터링을 하여 보여주는 기능입니다.

그러나 작은 기능이라하더라도 fetch, filter, map, 조건부 렌더링 등의 다양한 React의 요소를 담고 있기 때문에 많이 배우는 또 다른 계기가 되었습니다. 함께 구현해낸 영호님에게 고마움을 전합니다.

그렇다면, 바로 코드를 보러 가겠습니다.

💻 부모 컴포넌트

// SearchInput.js
export class SearchInput extends Component {
  constructor() {
    super();
    this.state = {
      movies: [],
    };
  }

  componentDidMount() {
    fetch(`${MOVIES_LIST}`)
      .then(res => res.json())
      .then(res =>
        this.setState({
          movies: res.MOVIE_LIST,
        })
      );
  }
  
  render() {
    const { movies } = this.state;
    const { userInput, searchClicked, handleSearch, searchTitle } = this.props;

    const filteredMovies = movies.filter(movie => {
      return movie.movie_name.includes(userInput);
    });

    return (
      <>
        <input
          name="userInput"
          type="text"
          className="search-input"
          placeholder="작품 제목을 검색해보세요."
          onClick={handleSearch}
          onChange={searchTitle}
        />
        {searchClicked && (
          <SearchBar
            movies={movies}
            onClick={this.onClick}
            filteredMovies={filteredMovies}
          />
        )}
      </>
    );
  }
}

export default SearchInput;

• 영화 목록을 fetch 함수를 통해 서버에서 가져옵니다.
• movies라는 state에 렌더가 되기 전에 변경될 수 있도록 값을 넣어줍니다.
• filteredMovies라는 변수에 movies state에 filter를 돌려주도록 합니다. 혹시 해당 개념을 잘 이해하기 어려우시다면 제가 작성했던 몬스터 벨로그 글을 보시길 추천드리겠습니다.

• userInput이라는 사용자가 입력하는 값을 받아오는 변수를 포함하는 영화를 리턴하도록 합니다.
• searchClicked라는 변수의 기본값은 false에서 검색바를 클릭하면 true로 변하며, 조건부 렌더링을 통해 검색창이 나타나게 됩니다.
• SearchBar는 검색바를 나타내는 컴포넌트로서 props에 movies, filteredMovies가 전달됩니다.

이처럼 부모 컴포넌트인 SearchInput의 코드를 뜯어보았습니다. filter, 조건부 렌더링에 대한 개념에 대해 숙지하고 계시다면, 충분히 이해하실 수 있는 코드라 생각합니다.

그렇다면, 이제 간단히 자식 컴포넌트인 SearchBar 코드에 대해 알아볼까요?

💻 자식 컴포넌트

// SearchBar.js
class SearchBar extends Component {
  render() {
    const { movies, filteredMovies } = this.props;

    return (
      <div className="navmodal" onClick={this.props.onClick}>
        <div className="wrapper">
          <div className="related-search">연관 검색어</div>
          <div className="related-movie">
            {filteredMovies.length !== movies.length &&
              filteredMovies.map(movie => {
                return <p className="pTag">{movie.movie_name}</p>;
              })}
          </div>

          // ... 중략

• props로 전달받은 movies, filteredMovies을 구조 분해 할당으로 저장해줍니다.
• 그러나 여기서 주의해야할 점은 검색창에는 아무런 것도 보이지 않다가 검색을 시작하게 되면, 그때 필터링된 값을 보여주어야 한다는 점입니다.
• 이를 구현하기 위해 filteredMovies.length !== movies.length &&와 같은 코드를 작성했습니다.

이렇게 되면, 위와 같이 빈 연관 검색어에서 영화 제목을 검색하시게 되면, 자음마다 뜨진 않지만 서버 데이터에 있는 영화 제목을 글자 하나하나마다 가져와서 배열로 불러오는 검색 기능을 구현하실 수 있습니다.

이렇게 React의 핵심인 props, map, filter, 조건부 렌더링 등에 대해 알아볼 수 있는 검색 기능에 대해 코드를 뜯어보며 살펴보았습니다.

질문은 언제든 환영이며, 다음 글에는 곧 1차 프로젝트 후기로 돌아오겠습니다👋👋