React에서 버튼 클릭 시 API 데이터를 가져옵니다.

전제 조건

자바스크립트
반응하다

반응 후크

React 라이브러리에는 클래스에 의존하지 않고 다양한 구성 요소의 상태를 관리하는 데 도움이 되는 후크가 있습니다.

useEffect 후크는 기능 구성 요소에서 데이터 가져오기와 같은 부작용을 관리하는 데 사용됩니다.
부작용은 함수 외부의 구성 요소 상태를 변경하는 작업입니다.

useEffect 후크를 사용하여 JSON placeholder API에서 데이터를 가져오는 방법의 예를 살펴보겠습니다.

데이터를 가져오는 함수를 정의하고 useEffect 후크 내에서 호출할 수 있습니다.

import React, {useEffect,useState} from 'react';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`https://jsonplaceholder.typicode.com/albums/1`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [])

    if (data) {
        console.log(data)
        return <div className='App'>{data.title}</div>;
    } else {
        return null;
    }

}

export default App;

fetchData()는 API에서 데이터를 가져오고 데이터의 새 상태를 설정합니다.

You can use a library such as axios to make HTTP requests to APIs.

아래와 같이 앨범 API에서 ID가 1인 항목에 대한 세부 정보를 검색합니다.


useEffect는 모든 렌더링 후에 실행됩니다. 첫 번째 렌더링 이후와 업데이트가 있을 때마다 실행됩니다.
종속성 배열을 사용하여 id의 상태가 변경될 때만 효과가 실행되도록 할 수 있습니다.

useEffect(() => {
      const fetchData = async () => {
           const response = await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [id])   
}

useState 후크를 사용하여 API에서 검색된 데이터의 상태를 저장합니다.

이 기능은 마우스나 버튼 클릭과 같은 특정 이벤트에 의존하지 않고 데이터를 검색해야 할 때 유용합니다.

useEffect는 구성 요소가 DOM에 처음 마운트될 때 실행되기 때문에 특히 사용자 입력에 의존하는 경우 이벤트가 발생할 때만 데이터를 가져오는 방법이 필요합니다.

버튼 클릭 시 데이터 가져오기

업데이트가 있을 때마다 API 호출을 피하기 위해 useEffect에 의존하지 않고 사용자 지정 함수를 사용하여 데이터를 가져올 수 있습니다.

사용자는 검색하려는 항목의 ID를 제출합니다. 이것은 id 필드를 동적으로 만듭니다.

사용자 입력 받기

<input className='album_id' required="required" placeholder='Enter an ID'/>
<button type="submit">Search</button>

사용자 입력 처리

const [id, setId] = useState('')
const [data, setData] = useState(null)

const handleClick = async () => {
        try {
            const data = await (await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)).json()
            setData(data)
        } catch (err) {
            console.log(err.message)
        }
    }
 return (
        <div>
            <input className='album_id' required="required" placeholder='Enter an ID' value={id} onChange={e => setId(e.target.value)} />

            <button type="submit" onClick={handleClick} >Search</button>

        </div>
    )

id 변수를 정의하고 setId 함수를 사용하여 상태를 저장하고 URL에 Id를 제공합니다.


API에서 예상되는 응답을 받는지 여부에 따라 표시되는 출력을 사용자 지정할 수도 있습니다.

function checkResponse(data) {
        if (data) {
            console.log(data)
            return <div className='App'>{data.title}</div>;
        } else {
            return null;
        }
    }

checkResponse()는 응답 상태에 따라 다른 출력을 렌더링하는 데 사용됩니다.

Here은 이 게시물에서 사용된 전체 코드입니다.
행복한 학습!!!