useEffect 후크 소개

React Hook이 무엇인가요?

React에는 기본적으로 상태 및 기타 메서드와 같은 React의 기능에 "연결"할 수 있는 기능 구성 요소 권한을 부여하는 후크가 있습니다. 작업할 때 염두에 두어야 할 후크와 관련하여 세 가지 일반적인 규칙이 있습니다.

반응 후크 규칙:

후크는 React 함수 구성 요소 내에서만 호출할 수 있습니다

.

함수 구성 요소의 최상위 수준에서만 후크를 호출할 수 있습니다

.

후크가 조건부일 수 없음

부작용

함수가 호출되고 함수가 함수 외부에서 변경을 일으키는 경우 함수는 부작용이 있는 것으로 간주됩니다. 일반적인 부작용의 예로는 요청 만들기, 데이터베이스에서 데이터 가져오기, 타이머 통합, DOM 직접 업데이트 등이 있습니다.

useEffect 후크

React에서 사용할 수 있는 useEffect 후크를 사용하면 함수 구성 요소에서 앞서 언급한 이러한 부작용 중 일부를 수행할 수 있습니다. 이 후크를 사용하려면 먼저 가져와야 합니다.

import React, { useEffect } from "react";

부작용을 수행하려는 함수 구성 요소 내에서 useEffect 후크를 호출하고 원하는 부작용처럼 작동하는 콜백 함수를 전달할 수 있습니다.

function App() {
 //side effect function
  useEffect(
     () => {
       console.log("Hello, I am second");
     }
  );
  console.log("Hi, I am first");
  return (
    <div> 
       <button>Click me</button>
       <input type="text" placeholder="Type here..." />
    </div>
  )
}

위의 코드를 실행하면 메시지가 다음 순서로 나타납니다.
1. 안녕하세요 저는 처음입니다
2. 안녕하세요, 저는 두 번째입니다

useEffect 후크에 콘솔 메시지를 전달함으로써 우리는 원하는 메시지를 콘솔 로깅으로 렌더링한 후 함수 구성 요소에 작업을 지시합니다. 후크에서 데이터 가져오기, 타이머 생성 또는 DOM 업데이트와 같은 다른 작업을 수행할 수 있습니다.

useEffect 종속성

useEffect 후크는 모든 렌더링에서 실행되므로 부작용을 여러 번 수행할 수 있으므로 종속성을 사용하여 이를 제어해야 합니다. 렌더링의 양을 제어하기 위해 useEffect 후크에 종속성 배열인 두 번째 매개변수를 통합할 수 있습니다.

종속성 없음

useEffect(() => {
   //Runs on every render
});

빈 배열

useEffect(() => {
   //Runs only on the first render
}, []);

소품/상태 값

useEffect(() => {
   //Runs on the first render 
   //And when dependency value changes 
}, [prop, state]);

이제 useEffect 후크를 사용하는 데 필요한 입문 지식이 있으므로 계속 사용해 보십시오! 행운을 빕니다!