React useEffect 훅!

일반적으로 웹 애플리케이션을 구축할 때 우리는 일종의 API를 사용합니다. 우리는 해당 API를 사용하여 사용자가 수행하는 작업에 따라 앱에서 CRUD 작업(만들기, 읽기, 업데이트, 삭제)을 수행합니다.

예를 들어, DOG API 🐶에서 강아지의 임의 이미지를 가져오려는 경우 일반적인 가져오기는 다음과 같습니다.

fetch("https://dog.ceo/api/breeds/image/random")
    .then(res => res.json())
    .then(data => console.log(data))

그런 다음 개발자 콘솔을 확인하면 데이터를 정리한 후 JSON 형식의 응답 객체를 볼 수 있습니다.

{message: "https://images.dog.ceo/breeds/terrier-irish/n02093991_3243.jpg", status: "success"}

이제 React에서는 구성 요소에 대한 데이터 또는 정보를 포함하는 데 사용되는 기본 제공 React 객체인 State를 사용합니다.

이제 가져오기 API를 설정했으므로 응답을 상태에 저장하겠습니다! 아래 코드를 확인하세요 😎

import React from "react"

export default function App() {
    const [dogData, setDogData] = React.useState({})


    fetch("https://dog.ceo/api/breeds/image/random")
    .then(res => res.json())
    .then(data => setDogData(data))

    return (
        <div>
            <pre>{JSON.stringify(dogData, null, 2)}</pre>
        </div>
    )
}

시원한! 이제 API로 가져와 새 상태로 저장한 다음 새 상태 ♽로 구성 요소를 다시 렌더링하는 것처럼 보입니다!

하지만 문제가 있습니다. React.js 문서에서 이 문장을 확인하세요.



이것은 지금 우리를 곤경에 빠뜨릴 수 있습니다. 현재 코드에서 실제로 발생하는 것은 구성 요소가 API에서 가져오고 구성 요소의 상태를 설정한 다음 업데이트된 구성 요소를 새 상태로 렌더링하는 것입니다. 업데이트된 구성 요소가 렌더링되면 동일한 가져오기 API 요청을 다시 실행하고 상태를 업데이트하여 새 가져오기를 다시 수행하는 업데이트된 구성 요소를 렌더링하므로 무한 루프에 빠지게 됩니다. 아래 GIF를 확인하세요.



이제 이 가이드의 핵심인 useEffect 후크입니다! 여기에서 코드로 구현됩니다.

    useEffect(() => {
        fetch("https://dog.ceo/api/breeds/image/random")
        .then(res => res.json())
        .then(data => setDogData(data))
    }, []);

이 후크는 2개의 인수를 사용합니다.

useEffect([callback], [dependency])

첫 번째는 콜백 함수입니다. 이 경우에는 가져오기 요청입니다. 두 번째 인수(개념적으로)는 종속성입니다. 여기서는 종속성이 없기 때문에 빈 배열일 뿐입니다.

빈 배열을 두 번째 인수로 생략하면 구성 요소가 다시 무한 루프에 빠지게 되므로 그대로 두겠습니다!

이 코드 조각을 사용하면 가져오기 요청이 한 번만 발생하고 가져오기에서 검색된 데이터로 상태를 성공적으로 업데이트할 수 있습니다.

이 후크에 대한 간단한 사용 사례가 있지만 그럼에도 불구하고 중요한 것입니다.

질문이 있거나 공유할 추가 정보가 있으면 연락해 주세요! 이 가이드를 개선하는 데 도움이 되는 모든 것이 도움이 됩니다 💪🏾