React의 useEffect 후크

다시 오신 것을 환영합니다!

이것은 React Hook 시리즈의 두 번째 블로그로, React에서 사용되는 다양한 Hook에 대해 배우고 있으며 오늘의 Hook은 useEffect Hook입니다. 시작하기 전에 이 시리즈의 마지막 블로그useState Hook를 읽는 것이 좋습니다. 이 후크는 useState 후크와 완전히 독립적이고 후크에 대한 사전 지식 없이 읽고 배울 수 있지만 후크에 대한 기본적인 이해가 있으면 도움이 됩니다.

React에서 useEffect 후크의 사용은 무엇입니까?

useEffect 후크는 구성 요소에서 부작용을 수행하는 데 사용됩니다. 부작용은 일반적인 구성 요소 평가 외부에서 발생하는 작업입니다. 데이터 가져오기, 웹 API 및 DOM 수동 변경은 부작용의 몇 가지 예입니다.

useEffect 후크를 사용하는 방법

useEffect 후크 가져오기

다음 코드를 사용하여 React 라이브러리에서 구조를 분해하여 가져올 수 있습니다.

import {useEffect} from "react"

useEffect 후크 구문

useEffect (  <function> , [dependency] )

두 가지 주장이 있습니다.

(i) 첫 번째는 dependence가 제공될 때까지 모든 렌더링에서 호출되는 함수입니다.

(ii) 두 번째 인수는 dependence로, 지정된 함수가 변경되면 호출할 수 있도록 useEffect 합니다.

종속성을 사용하는 이유

이전에 언급한 대로 useEffect 후크는 렌더링할 때마다 우리 함수를 호출하여 무한 루프가 발생하고 브라우저가 충돌합니다. 그러나 종속성을 제공하여 이를 피할 수 있는 방법이 있습니다.

1) 종속성으로 빈 배열 [] 제공

 useEffect( () =>{

// it will run only on the first render

},[]}

2) props 또는 state를 종속성으로 제공

useEffect( () =>{

// it will run on the first render
// it will also run every time the given dependencies changes

},[  props , state  ]}

NonEmptyDependency.js 및 EmptyDependency.js 파일을 확인하십시오. 예제를 더 잘 이해하기 위해 다음 코드 및 콘솔의 콘솔.

useEffect의 정리 기능

다음 시나리오를 고려하십시오. 사용자 ID를 통해 특정 사용자를 가져오지만 가져오기가 완료되기 전에 마음을 바꿔 다른 사용자를 얻으려고 시도합니다. 이전 검색 요청이 아직 진행 중인 동안 소품(이 예에서는 ID)이 업데이트됩니다.
애플리케이션이 메모리 누수에 노출되지 않도록 하려면 cleanup 함수를 사용하여 가져오기를 취소해야 합니다.useEffect가 호출될 때마다 정리 함수도 첫 번째 렌더링을 제외하고 실행됩니다.

다음 코드 샌드박스에서 useEffect 후크 끝에 있는 타임아웃 기능을 정리합시다.



이것이 이 블로그의 전부입니다. React 후크에 대해 자세히 알아보려면 이 React 후크 시리즈를 계속 읽으십시오. 다음 블로그에서는 React에서 전역적으로 상태 관리를 처리하는 데 사용되는 'useContext' 후크를 살펴보겠습니다.
아래 댓글에 소중한 피드백을 남겨주세요.

React, JavaScript 및 웹 개발에 대해 자세히 알아보려면 에서 저를 팔로우하세요.

참조: W3Schools, Blog