멍청한 놈의 관점에서 useEffect 후크

왜 이 후크가 useEffect 라고 불리는지 궁금한 적이 있습니까?
단순히 구성 요소의 부작용을 관리하기 때문에 부작용이 무엇입니까?

부작용

부작용은 예를 들어 함수의 출력 값을 대상으로 하지 않는 모든 것이 될 수 있습니다.

데이터를 가져오기 위한 비동기 API 호출

Observable에 대한 구독 설정

수동으로 DOM 업데이트

함수 내에서 전역 변수 업데이트
코드 예:

import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 document.title = message; // this is a side-effect

 return <div>{message}</div>
}

인수

useEffect 후크는 두 개의 인수를 허용합니다.useEffect(callback function , [dependencies])

콜백 함수는 렌더링 후에 발생하려는 부작용을 실행하는 것입니다.

종속성 배열은 부작용을 수행하는 콜백 함수를 실행할 시기를 useEffect 후크에 알리는 것입니다.

종속성 배열

종속성 배열 인수는 세 가지 형식일 수 있습니다.

제공되지 않음 => 각 렌더링 후에 콜백 함수가 실행되어 무한 루프가 발생할 수 있음을 의미합니다.

import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";

 useEffect(()=>{
   document.title = message;
 })
 return <div>{message}</div>
}

빈 배열로 제공됨 => 초기 렌더링 후 콜백 함수가 실행됨을 의미 [마운팅]

import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";

 useEffect(()=>{
   document.title = message;
 },[])
 return <div>{message}</div>
}

종속성 있음 => 일반적으로 종속성은 소품 및 상태이며 콜백 함수는 초기 렌더링 후 및 종속성이 변경된 후에 호출됩니다.

import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";

 useEffect(()=>{
   document.title = message;
 },[name])
 return <div>{message}</div>
}

청소

useEffect 후크는 항상 아무것도 반환하지 않거나 이 함수가 정리에 사용되는 함수를 반환할 것으로 예상합니다. 일부 부작용은 타이머를 정리하거나 소켓 연결을 닫는 것과 같은 정리가 필요합니다.

import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";

 const timer = useEffect(()=>{
   setInterval(()=>{
      document.title = message;
   },2000)

   return function cleanUp(){
      clearInterval(timer);
   }
 },[name])
 return <div>{message}</div>
}

최종 참고 사항:
비동기 함수는 약속을 반환하고 useEffect 후크는 항상 콜백 함수가 아무 것도 반환하지 않거나 정리 함수를 반환할 것으로 예상하기 때문에 콜백 함수는 비동기일 수 없습니다.

추가 리소스:

Dimitri Pavlutin 기사 => Link
Ben Awad 유튜브 비디오 =>

여기까지 오셨다면 이 글을 즐기시고 새로운 것을 배우셨기를 바랍니다^^ .