React에서 검색 창을 만드는 방법

검색창이란 무엇입니까?

웹 사이트 검색 표시줄은 사용자가 콘텐츠를 검색할 수 있는 표시줄입니다. 사용자는 검색 표시줄을 클릭하고 쿼리를 입력한 다음 돋보기 아이콘인 "검색"을 클릭합니다.

예를 들어 블로그 게시물을 검색하는 막대는 다음과 같습니다.

React에서 검색창을 만들어 봅시다

https://react-searchbar.vercel.app/에서 데모를 볼 수 있습니다.

GitHubhttps://github.com/nicvazquez/react-searchbar에서 코드를 볼 수 있습니다.

1) React 앱 만들기

다음 명령을 사용하여 Vite로 React 앱을 만들어 보겠습니다.

npm create vite@latest

그런 다음 몇 가지 옵션을 완료하라는 메시지가 표시됩니다.

√ Project name: ... react-searchbar
√ Select a framework: » react
√ Select a variant: » react

훌륭한! 이제 다음 명령을 실행합니다.

cd react-modal
npm install
npm run dev

모든 것이 잘 되었다면 종속성이 설치된 애플리케이션을 생성하고 프로젝트를 로컬 서버에서 실행해야 합니다. 제 경우에는 http://127.0.0.1:5173/ 입니다.

2) 가져오기 API

검색 표시줄을 탐색할 때 사용할 수 있도록 Rest API에서 데이터를 가져올 것입니다.

이것은 게시물의 요점이 아니므로 API에서 데이터를 가져오는 방법에 대해 자세히 설명하지 않겠습니다.

이 코드를 App.jsx에 넣으십시오. 이러한 방식으로 작업할 수 있는 데이터와 함께 응용 프로그램의 기반을 갖게 됩니다.

import { useEffect, useState } from "react";
import "./App.css";

function App() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        void fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => response.json())
            .then((data) => setUsers(data));
    }, []);

    return (
        <div>
                <ul>
                    {users.map((user) => (
                        <li key={user.id}>{user.name}</li>
                    ))}
                </ul>
            }
        </div>
    );
}

export default App;

앱은 다음과 같아야 합니다.

3) 검색창 만들기

이제 중요한 내용으로 넘어가겠습니다. SearchBar 구성 요소를 만들어 보겠습니다.

src에서 components라는 폴더를 만들고 그 안에 searchbar라는 또 다른 폴더를 만듭니다.

searchbar 폴더 안에 SearchBar.jsx 및 searchbar.module.css 2개의 파일을 만듭니다.

프로젝트 구조는 다음과 같아야 합니다.



좋습니다. 이제 SearchBar.jsx 구성 요소에서 첫 번째 단계를 수행하겠습니다.

먼저 기반을 갖기 위해 입력을 생성합니다.

import React from "react";

export const SearchBar = () => {
    return <input placeholder="Search for an user" type="search" />;
};

변경 사항을 확인하기 위해 내부에서 SearchBar 구성 요소를 가져오겠습니다App.jsx.

import { SearchBar } from "./components/searchbar/SearchBar";

우리App.jsx의 반환은 다음과 같아야 합니다.

return (
        <div>
            <SearchBar />
            <ul>
                {users.map((user) => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );

우리는 이미 구조를 가지고 있지만 여전히 좋아 보이지 않습니다. 약간의 패딩을 주자
SearchBar.jsx 파일에서...

CSS 모듈 파일을 가져오고 검색 표시줄에 className을 추가합니다.

import React from "react";
import styles from "./searchbar.module.css";

export const SearchBar = () => {
    return (
        <input
            className={styles.searchbar}
            placeholder="Search for an user"
            type="search"
        />
    );
};

searchbar.module.css에 다음 코드를 추가해 보겠습니다.

.searchbar {
    padding: 0.5rem;
}

지금까지 애플리케이션은 다음과 같아야 합니다.

4) 검색창에 기능 추가

우리의 App.jsx로 돌아가 봅시다.

검색이 작동하려면 화면에 데이터를 표시할 때 필터를 추가해야 합니다.

이 useState를 추가합니다. 나중에 사용자가 입력한 내용을 저장하는 데 사용합니다.

const [search, setSearch] = useState("")

데이터를 필터링하려면 JSX에 filter() JavaScript 메서드를 추가해야 합니다.

const results = users.filter((user) =>
    user.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
);

필터링된 데이터가 있으면 이를 반복해야 합니다. 또한 플러스로 표시할 사용자가 없는 경우 메시지를 표시합니다.

{
    <ul>
        {results.length === 0 ? (
            <p>There are no users to display</p>
        ) : (
            results.map((user) => <li key={user.id}>{user.name}</li>)
        )}
    </ul>
}

우리의 SearchBar.jsx에서 소품을 통해 onChange 이벤트를 전달해야 합니다. 이것은 나중에 사용자가 입력한 내용을 저장하는 역할을 합니다.

export const SearchBar = ({onChange}) => {
    return (
        <input
            className={styles.searchbar}
            placeholder="Search for an user"
            type="search"
            onChange={onChange}
        />
    );
};

App.jsx에서 search 상태의 입력 값을 저장하는 익명 함수를 props를 통해 보냅니다.

<SearchBar onChange={(e) => setSearch(e.target.value)} />

이제 검색창에 입력하면 search에 저장된 항목을 기반으로 필터링하므로 필터링이 올바르게 작동합니다.
App.jsx는 다음과 같아야 합니다.

import { useEffect, useState } from "react";
import "./App.css";
import { SearchBar } from "./components/searchbar/SearchBar";

function App() {
    const [users, setUsers] = useState([]);
    const [search, setSearch] = useState("");

    useEffect(() => {
        void fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => response.json())
            .then((data) => setUsers(data));
    }, []);

    const results = users.filter((user) =>
        user.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
    );

    return (
        <div>
            <SearchBar onChange={(e) => setSearch(e.target.value)} />
            {
                <ul>
                    {results.length === 0 ? (
                        <p>There are no users to display</p>
                    ) : (
                        results.map((user) => <li key={user.id}>{user.name}</li>)
                    )}
                </ul>
            }
        </div>
    );
}

export default App;

완료

그거였다! 질문이나 제안 사항이 있으면 댓글에 남겨주세요.

https://react-searchbar.vercel.app/에서 데모를 볼 수 있습니다.

GitHubhttps://github.com/nicvazquez/react-searchbar에서 코드를 볼 수 있습니다.

여기까지 와주셔서 감사합니다 :)