React useState 및 useEffect를 사용하여 API에서 데이터를 가져오는 방법

React로 API를 가져오는 방법을 배우느라 며칠을 고생했습니다. 마침내 해냈습니다! React 후크로 데이터를 가져오는 데 어려움을 겪고 있다면 이 기사가 도움이 되었으면 합니다.

더 이상 고민하지 않고 바로 들어가 보겠습니다.

반응 후크

좋습니다. React에서 API 데이터를 가져오려면 무엇이 필요합니까?

단 두 가지:

React.useState

React.useEffect

이들은 상태를 관리하고 구성 요소의 부작용을 수행하는 React 후크입니다.

useState

React.useState 후크는 변수의 상태를 관리하는 데 사용됩니다. 다음과 같이 보입니다.

const [count, setCount] = React.useState(0) 

The count variable is initalized with 0. To change this state, you have to set up the function setCount and trigger it.

개수를 추가하도록 상태를 설정하는 예:

import "React" from "react"

export default function Count() {
    const [count, setCount] = React.useState(0)

    function setCount() {
        prevCount => prevCount + 1
    }

    return (
        <div>
            <p>{count}</p>
            <button onClick={setCount}>Add</p>
        </div>
    )
}

Now every time, you click the Add button, the number will be increase by 1.

React useState*는 문자열, 배열, 부울, 숫자 등 모든 종류의 변수를 관리할 수 있습니다.

You can read more about it here .

useEffect

React.useEffect를 사용하면 구성 요소의 부작용을 수행할 수 있습니다. 예를 들어 API를 가져오거나 LocalStorage에 항목을 저장합니다.

수행하려는 기능 주위에 useEffect를 래핑하기만 하면 됩니다.

React.useEffect(() => {
    // Run something 
})

재미있는 점은 이렇게 놔두면 효과가 영원히 지속된다는 것입니다. 예를 들어 API를 가져오는 경우 사이트를 새로 고치지 않아도 새 데이터를 계속 로드합니다.

함수를 한 번 또는 트리거 시 실행하려면 함수의 중괄호 다음에 배열 내부에 종속성을 추가해야 합니다.

React.useEffect(() => {
    // Run only one time 
}, [])

빈 배열은 함수를 한 번만 실행합니다.

React.useEffect(() => {
    // Run as value changes 
}, [props or state value])

배열 내부에 props 또는 state 값을 추가하면 상태 변경 값으로 함수가 실행됩니다.

이제 모든 API 끝점에서 데이터를 가져올 수 있는 두 가지 강력한 도구가 제공됩니다.

이 예에서는 Harry Potter Movie API 을 사용합니다.

⚡ 나는 나쁜 짓을 저질렀음을 엄숙히 맹세합니다.⚡

코드를 시작합시다!

기본 설정

저는 이 작은 프로젝트에 Scrimba online editor을 사용하지만 로컬 환경에서 React to code를 설치할 수 있습니다.

기본 설정에는 다음이 포함됩니다.

index.js

App.js

구성 요소/Movie.js

Check out my code here

API 가져오기는 App.js 및 components/Movie.js 에서 수행됩니다.

먼저 component 폴더를 만들고 새 파일Movie.js을 추가합니다.

import React from "react"

export default function Movie() {
    return (
        <h1>Hello World</h1>
    )
}

코드는 나중에 변경되지만 지금은 간단한 H1을 추가하여 화면에 어떻게 렌더링되는지 테스트해 보겠습니다.

다음으로 Movie.js를 App.js로 가져옵니다.

App.js에서 API에서 가져오는 데이터를 포함할 변수movies를 만듭니다.

const [movies, setMovies] = React.useState([])

movies will have an inital state of an empty string.

API 끝점의 데이터를 movies 에 추가하려면 다음 코드를 추가합니다.

React.useEffect(() => {
        fetch("https://potter-db-api.herokuapp.com/v1/movies")
            .then(res => res.json())
            .then(data => setMovies(data.data))
    }, [])

useEffect will handle any side effect from fetching API data from API. Once data is fetched, it will be saved to movies through setMovies function. In other words, movies state will change from empty array to an array of data from API.

We use an empty array [] to fetch the data just once.

이제 저장한 데이터를 렌더링하려면 배열movies을 매핑하고 표시할 위치를 지정합니다.

(여전히 앱 기능 내부)

const MovieElements = movies.map(movie => {
    return (
        <Movie key={movie.id} movie={movie} />
)

return (
    <div>
        {MovieElements}
    </div>
)

Movie.js 파일에서 소품을 전달하고 렌더링할 데이터를 추가합니다. 이 예에서는 영화 제목, 요약 및 예고편 링크를 추가하겠습니다.

To see what data you can display, include a console.log(movies) inside your App function or console.log(data) inside API fetching function.

다음은 components/Movie.js의 코드입니다.

export default function Movie(props) {
    return (
        <div>
            <img width="100px" />
            <h3>{props.movie.attributes.title}</h3>
            <p>{props.movie.attributes.summary}</p>
            <a href={props.movie.attributes.trailer}>View trailer</a>
        </div>
    )
}

그게 다야. 이제 데이터 소스에 모든 영화 목록이 표시됩니다.


| Link to example |

전체 목록이 아닌 일부 영화만 표시하려면 슬라이스()를 사용하여 표시할 항목 수를 지정하십시오.

For example, this code will display only 5 Harry Potter movies on the page.

const movieElements = movies.slice(0, 5).map((item) => {
        return <FilmItem key={item.id} film={item} />
    });

또 다른 방법은 요약과 같은 긴 텍스트의 단어 수를 제한하는 것입니다.

당신이 해야 할 일은 .split(" ") 를 사용하고 ""사이에 공백을 두어 단어를 분리한 다음 splice(0, 30) 를 사용하여 30개의 단어를 얻은 다음 join(" ") 를 사용하여 다시 결합하는 것입니다.

<p>{props.movie.attributes.summary.split(" ").splice(0, 30).join(" ")}...<p>

이 기사가 도움이 되셨기를 바랍니다. 피드백이 있는 경우 아래에 의견을 남기거나 Twitter를 통해 메모를 보내주십시오. 에서 쉽게 연락할 수 있습니다.

읽어 주셔서 감사합니다. 즐거운 코딩하세요!