React Live Search를 구축하는 방법(Rick & Morty Edition)

이 짧은 튜토리얼에서는 React JS를 사용하여 API에서 데이터를 가져오고 필터링하는 방법을 보여줍니다.

만약 질문이 있다면

GitHub 저장소: https://github.com/dom-the-dev/react-search-bar

나도 차근차근 만들어봤다video

내용 목록

Create React App

Clean Up

Fetching Data

Display Data

Filter Search Results

React 앱 만들기

To create a new react application open your terminal and run the following command:

npx create-react-app react-live-search

This creates a complete react application. With cd spotify-react && yarn start you jump into the projects directy and start the development server which then runs at http://localhost:3000 by default.

(If for whatever reason the port is not 3000 make sure to change the redirect url in your spotify app settings.)

정리

Before we start to code let's remove the unnecessary stuff we don't need. So remove everythin inside of App.css and in App.js remove the imports as well as the html inside of the div with className App .
So your App.js will look similar to this:

import './App.css';

function App() {

    return (
        <div className="App">

        </div>
    );
}

export default App;

데이터 가져오기

Now we are ready to implement the function to fetch Data from the Rick & Morty API.

https://rickandmortyapi.com/

다음 명령으로 HTTP 요청을 처리할 설치axios

yarn add axios

앱으로 가져오기

import axios from 'axios";

데이터를 가져오기 전에 데이터를 저장할 수 있는 상태가 필요합니다. 이를 위해 우리는 useState 후크를 사용할 것입니다. 이제 가져오고 새 상태 변수를 생성해 보겠습니다characters.

App.js 상단에 추가import {useState} from 'react';
App() 내부에 다음을 추가합니다.
const [query, setQuery] = useState("")
앱을 열 때 즉시 데이터를 가져오고 싶기 때문에 useEffect 후크가 필요합니다. 따라서 반응에서도 가져옵니다.

App.js 상단의 import 문을 조정하고 App 함수에 useEffect 후크를 추가합니다.

당신App.js은 이제 다음과 같이 보일 것입니다:

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

function App() {
    const [characters, setCharacters] = useState([])

    useEffect(() => {

    }, [])

    return (
        <div className="App">

        </div>
    );
}

export default App;

useEffect 내부에서 API Endpoint에 대한 비동기 get 요청을 수행하고 원하는 데이터를 가져오는 fetchData 함수를 선언하려고 합니다. 가능한 오류를 처리하기 위해 try/catch 블록 내부에 코드를 래핑합니다.
가져온 데이터는 setCharacters 함수를 호출하는 문자 상태에 저장됩니다.

const fetchData = async () => {
            try {
                const {data} = await axios.get(`https://rickandmortyapi.com/api/character/`)
                setCharacters(data.results)
            } catch (error) {
                console.error(error)
            }
        }

그런 다음 이 함수를 호출하기만 하면 됩니다.
fetchData()

데이터 표시

Now we have our data stored in the state, and we are ready to dispaly it in the frontend.

For that create a new div and inside of it we are going to map over the characters Array and dispaly the characters name as well as the image.

<div className="results">
    {characters.map(character => (
        <div key={character.id}>
            <img src={character.image} alt={character.name}/>
                {character.name}
        </div
    ))}
</div>

If you want you can add some styling to your App.css .

.results {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.search {
    background-color: darkgray;
    text-align: center;
    padding: 15px;
}

.input {
    font-size: 25px;
}

When you now visit your browser at http://localhost:3000 you should be able to see the data we just fetched. Now we are ready for the last step.

검색 결과 필터링

검색 입력 추가

검색 결과를 필터링하려면 쿼리라는 새 상태를 만들고 처음에 빈 문자열로 설정해야 합니다.

const [query, setQuery] = useState("")

또한 입력을 시작하자마자 상태를 업데이트하는 입력 필드가 필요합니다. 이를 위해 이 입력 필드를 만들고 상태 업데이트를 트리거하는 onChange 이벤트를 추가할 수 있습니다. 입력 필드의 값은 쿼리 상태 값을 포함해야 합니다.

<div className="search">
    <input  type="text"
            placeholder={"Search Character"}
            className={"input"}
            onChange={event => setQuery(event.target.value)}
            value={query}
    />
</div>

검색 결과 업데이트

이제 검색 결과를 업데이트해야 합니다. 이를 달성하려면 페칭 엔드포인트를 조정해야 합니다. "이름"매개변수를 추가하고 여기에 검색어를 전달해야 합니다.

다음 코드 줄을 조정합니다.

const {data} = await axios.get(`https://rickandmortyapi.com/api/character/?name=${query}`)

설명하겠습니다. 처음에 쿼리 변수는 이름의 매개변수를 전달하지 않는다는 것을 의미하는 빈 문자열로 설정됩니다. 즉, 일반 호출을 수행하고 20개의 첫 번째 문자를 얻습니다.

이제 문제는 빈 종속성 배열을 useEffect 후크에 전달하기 때문에 검색 쿼리를 입력하기 시작하면 fetchData 함수가 다시 호출되지 않는다는 것입니다. 이 문제를 해결하려면 useEffect 후크에 대한 종속성으로 query를 추가해야 합니다. 따라서 useEffect 이제 다음과 같이 표시됩니다.

useEffect(() => {
    const fetchData = async () => {
        try {
            const {data} = await axios.get(`https://rickandmortyapi.com/api/character/?name=${query}`)
            setCharacters(data.results)
        } catch (error) {
            console.error(error)
        }
    }

    fetchData()
}, [query])

이렇게 변경하면 useEffect와 fetchData도 호출되고 쿼리 상태에 따라 새 검색 결과가 표시됩니다.
http://localhost:3000에서 응용 프로그램을 방문하고 입력 필드에 입력을 시작하십시오. 이제 결과가 즉시 업데이트됩니다.

그게 다야! 읽어 주셔서 감사합니다! 어떤 피드백이든 댓글을 보고 싶습니다!

단계별 비디오